Aaxxxx

TUGAS
SOTSKILL
DESIGN WEB APPLICATION
Dosen : Tri Sulistyorini
Oleh :
ANGGARA RAMADHAN (50417759)
DIKKY ANDHIKA RAMADHANI(51417694)
ALFHARIZKY FAUZI(50417462)
FAKULTAS TEKNOLOGI INDUSTRI

JURUSAN TEKNIK INFORMATIKA
UNIVERSITAS GUNADARMA
2019
Beranda
Menu Beranda = Akan mengarahkan ke tampilan utama dari web.
Menu beranda yang kami buat untuk memudahkan seleksi penerimaan siswa baru (PPDB)
untuk mencari info sekolah favorit yang ingin didaftarkan. Didalam menu beranda terdapat
info sekolah dan petunjuk pendaftaran untuk calon peserta didik.
Petunjuk
Menu petunjuk = Untuk memudahkan calon peserta didik dalam registrasi PPDB dan
mendaftar ke sekolah favorit.
Pada laman ini kita membuat petunjuk cara mengikuti PPDB ,dengan memberikan petunjuk
petunjuk apa sajya yang harus dilakukan oleh peserta PPDB online
Daftar Sekolah
Menu daftar sekolah = Mendaftar ke sekolah yang ingin dituju oleh calon peserta seleksi
PPDB
Peserta ppdb yang sudah mengikuti petunjuk atau sudah login ke website PSB ONLINE
Mendaftar ke sekolah favorit yang ingin dituju.
Registrasi Peserta
Menu Registrasi = Untuk calon peserta didik mendaftarkan diri.

Masuk Sebagai Peserta
Sub Menu masuk Sebagai Peserta = Mengisi data untuk masuk kedalam sekolah favorit dari
PSB(Peserta didik baru)
Masuk Sebagai Sekolah
Sub Menu masuk sebagai sekolah= Mendaftarkan sekolah yang terkait kedalam web PSB
Online
Listing Program
Listing Beranda
<div class="banner-img">
<div class="container theme-showcase">
<div class="top-banner col-md-12">
<h2>Selamat Datang <b><em>Calon Peserta</em></b> Didik Baru</h2>
<em>Cari Sekolah Favorit Kamu Sekarang</em>
<form action="{base_url}daftar_sekolah/cari" class="form-search" method="GET">
<input type="text" class="search-txt" name="k" placeholder="Masukan Nama Sekolah">
<button type="submit" class="search-submit"><img
src="{base_url}public/images/search_asd.png"></button>
</form>
</div>
<div class="bottom-banner col-md-12">
<div class="col-md-3"></div>
<a href="{base_url}daftar_sekolah">
<div class="col-md-3 menu-box red" id="box1">
<h4><b>INFO SEKOLAH</b></h4>
<img src="{base_url}public/images/info-sekolah.png">
</div>
</a>
<a href="{base_url}beranda/petunjuk">
<div class="col-md-3 menu-box yellow" id="box2">
<h4><b>PETUNJUK</b></h4>
<img src="{base_url}public/images/direction.png">
</div>
</a>
</div>
</div>
</div>
<div class="col-md-12 about">

<div class="container">
<div class="col-md-12" id="title">
<h2><b>PSB ONLINE 2015</b></h2>
</div>
<div class="col-md-12" id="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.</p>
<img src="{base_url}public/images/petunjuk.png">
</div>
<div class="col-md-12" id="title-follow">
<h4><b>Follow Us on</b></h4>
</div>
<div class="col-md-12" id="sosmed">
<img src="{base_url}public/images/facebook.png">
<img src="{base_url}public/images/twitter.png">
</div>
</div>
</div>

<div class="col-md-12 partner">

<h2><b>Bekerja Sama</b> Dengan</h2>
</div>
<ul class="list-partner" style="margin:0px; padding:0px;">
<li><a
href="http://www.certiport.com/Portal/desktopdefault.aspx?tabid=664&roleid=101"><img
src="{base_url}public/images/partner1.jpg"></a></li>
<li><a
<li><a
<li><a href="http://www.imiawards.org.uk/"><img
src="{base_url}public/images/partner4.gif"></a></li>
<li><a href="http://www.cisco.com/"><img src="{base_url}public/images/partner5.jpg"></a></li>
<li><a href="http://www.certiport.com/Portal/desktopdefault.aspx?tabid=666&roleid=101"><img
</ul>
</div>
</div>
Listing Petunjuk
<h2><b>PETUNJUK PENDAFTARAN</b></h2>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.</p>
<br><br>
<img src="{base_url}public/images/petunjuk.png">
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>-->

</div>
<ul class="list-partner">
<li><a href="#"><img
src="{base_url}public/images/partner4.gif"></a></li>
</ul>
</div>
</div>
</div>
Untuk Daftar Sekolah
<div class="container theme-showcase p-password">
<center>
<div class="col-md-4">
<div class="sidebar">
<div class="sidebar-title">CARI SEKOLAH</div>
<form action="{base_url}daftar_sekolah/cari" class="form-search" method="GET" style="margin:20px
0px;">
<input type="text" class="search-txt" name="k" style="width:200px;" placeholder="Nama Sekolah">
<button type="submit" class="search-submit"><img
src="{base_url}public/images/search_asd.png"></button>
</form>
</div>
<div class="sidebar">
<div class="sidebar-title">JENJANG SEKOLAH</div>
<ul>
{js}
<li><a href="{base_url}daftar_sekolah/jenjang/{id}">{name}</a></li>
{/js}
</ul>
</div>
</div>
<ol class="breadcrumb my-breadcrumb">
<li><a href="{base_url}beranda">Beranda</a></li>
<li class="active">Semua Sekolah</li>
</ol>
<div class="page-header" style="text-align:left; margin-top:0px;">
<h2 style="margin:0px; color:#4183d7">Semua Sekolah</h2>
</div>
<div class="col-md-12" style="text-align:left;">

<table class="table table-striped">
<thead>
<tr>
<th>Nama Sekolah</th>
<th>Jenjang Sekolah</th>
<th>Akreditasi</th>
<th>Status</th>
<th>Link</th>
</tr>
</thead>
<tbody>
{sekolah}
<tr id="{id}">
<td>{nama}</td>
<td>{jenjang}</td>
<td>{akre}</td>
<td>{status}</td>
<td>
<a href="{base_url}daftar_sekolah/detail/{id}"><button class="btn btn-
primary">Detail</button></a><br />
</td>
</tr>
{/sekolah}
</tbody>
</table>
</div>
</div>
</center>
</div>
<script>
$('.btnDel').on('click', function(){
var no = $(this).attr('data-id');
//console.log(no);
$("#"+no).hide();
//e.preventDefault();
//console.log(fileid);
$.ajax({
type: 'POST',
data: {
id: no
},
url: "{base_url}AjaxProcess/tambahKompetensi",
success: function(data){
console.log(data.Stat);
if(data.Stat == "SUCCESSED"){
openForm();
clearValue();
success.removeAttribute("style");
successRes.innerHTML = " <strong>Berhasil!</strong> Kompetensi berhasil ditambahkan.";
}else{
alert("Woops! Terjadi kesalahan, silahkan mencoba ulang.");
//location.reload();
}
},
error: function(error){
console.log("Woops! Something Wrong!");
}
})
});
</script>
Listing Registrasi Peserta

<center>
<div class="col-md-12 col-form">
<div class="col-md-12 col-title-form">

<h1 class="title-form">REGISTRASI PESERTA</h1>
<h3 class="subtitle-form">Selamat Datang. Daftar.</h3>
<div class="col-md-6 alert alert-info" id="info" style="display:none;">
<div id="userInfo"></div>
<div id="linkInfo"><a href="{base_url}login/peserta"><b>Login Now!</b></a></div>
</div>
<div class="col-md-6 alert alert-danger" id="warning" style="display:none;"></div>
<div class="col-md-6 alert alert-warning" id="alert" style="display:none;"></div>
</div>
<form action="" method="POST">
<input type="text" class="my-form" name="nisn" id="nisn" placeholder="Nomor Induk Siswa Nasional
(NISN)" />
<input type="text" class="my-form" name="namaLengkap" id="namaLengkap" placeholder="Nama
Lengkap" />
<input type="text" class="my-form" name="sekolahAsal" id="sekolahAsal" placeholder="Sekolah Asal"
/>
<input type="text" class="my-form" name="email" id="email" placeholder="Email Address" />
<button type="submit" class="my-button" id="btnDaftar">Daftar</button>
</form>
</div>
</div>
</center>
</div>
<script>
var button = document.getElementById("btnDaftar");

var nisn = document.getElementById("nisn");
var namaLengkap = document.getElementById("namaLengkap");
var sekolahAsal = document.getElementById("sekolahAsal");
var email = document.getElementById("email");
var info = document.getElementById("info");
var infoText = document.getElementById("userInfo");
var warning = document.getElementById("warning");
var alert = document.getElementById("alert");
//console.log(namaLengkap.value);
button.addEventListener('click', function(e){
e.preventDefault();
var action = "";

var match = nisn.value.match(/[^0-9]/g);
var emailVer = email.value.match(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-
9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
//console.log($.isArray(match));
info.setAttribute("style","display:none;");
warning.setAttribute("style","display:none;");
if(nisn.value == "" || nisn.value == null){

//alert("NISN Tidak Boleh Kosong!");
alert.removeAttribute("style");
alert.innerHTML = "NISN Tidak Boleh Kosong!";
nisn.focus();
return action = "false";
}else if($.isArray(match) === true){
//alert("NISN Tidak Valid!");
alert.innerHTML = "NISN Tidak Valid!";
nisn.focus();
}else if(namaLengkap.value == "" || namaLengkap.value == null){
//alert("Nama Tidak Boleh Kosong!");
alert.innerHTML = "Nama Tidak Boleh Kosong!";
namaLengkap.focus();
}else if(sekolahAsal.value == "" || sekolahAsal.value == null){
//alert("Sekolah Asal Tidak Boleh Kosong!");
alert.innerHTML = "Sekolah Asal Tidak Boleh Kosong!";
sekolahAsal.focus();
}else if(email.value == "" || email.value == null){
//alert("Email Address Tidak Boleh Kosong!");
alert.innerHTML = "Email Tidak Valid!";
email.focus();
}else if($.isArray(emailVer) === false){
//alert("Email Tidak Valid!");
email.focus();
}
if(action != "false"){
button.setAttribute("disabled", "disabled");
nisn.setAttribute("readonly", "readonly");
namaLengkap.setAttribute("readonly", "readonly");
sekolahAsal.setAttribute("readonly", "readonly");
email.setAttribute("readonly", "readonly");
button.setAttribute("class", "my-button button-loading");

button.innerHTML = "Loading..";
var ns = nisn.value;
var na = namaLengkap.value;
var se = sekolahAsal.value;
var em = email.value;
function openForm(){
button.removeAttribute("disabled");
button.setAttribute("class", "my-button");
button.innerHTML = "Daftar";
nisn.removeAttribute("readonly");
namaLengkap.removeAttribute("readonly");
sekolahAsal.removeAttribute("readonly");
email.removeAttribute("readonly");
}
function clearValue(){
nisn.setAttribute("value", "");
namaLengkap.setAttribute("value", "");
email.setAttribute("value", "");
sekolahAsal.setAttribute("value", "");
}
$.ajax({
type: "POST",
dataType: "JSON",
data: {
nisn: nisn.value,
nama: namaLengkap.value,
sekolah: sekolahAsal.value,
email: email.value
},
url: "{base_url}AjaxProcess/daftarPeserta",
//console.log("Ready!");
//console.log(data.result.error);
var status = data.stat;
var error = data.result.error;
if(status != "FAILED" && (error == "" || error == null)){
openForm();
clearValue();
info.setAttribute("style","display:block;");
infoText.innerHTML = "<b>Berhasil</b> Silahkan login!<br />Password Anda : <b>"+ data.result.pass
+"</b>";
}else if(error == "NISN"){
//alert("Maaf NISN sudah terdaftar!");
warning.setAttribute("style","display:block;");
warning.innerHTML = "<b>Maaf!</b> NISN Sudah Terdaftar!";
openForm();
nisn.focus();
}else if(error == "Email"){
//alert("Maaf Email sudah terdaftar!");
warning.innerHTML = "<b>Maaf!</b> Email Sudah Terdaftar!";
openForm();
clearValue();
email.focus();
}else{
alert("Sorry! But Something Wrong! Please try again!");
location.reload();
}
},
//console.log("Sorry! But Something Wrong!");
location.reload();
}
});
//console.log("OK!");
}
});
</script>
Listing Registasi Sebagai Sekolah

<div class="container theme-showcase p-regis-sekolah">
<center>
<div class="col-md-12 col-form">

<h1 class="title-form">REGISTRASI SEKOLAH</h1>
<h3 class="subtitle-form">Selamat Datang. Daftar.</h3>
<div class="col-md-6 alert alert-info" id="info" style="display:none;">
<div id="userInfo"></div>
<div id="linkInfo"><a href="{base_url}login/sekolah"><b>Login Now!</b></a></div>
</div>
</div>
<input type="text" class="my-form" name="namaSekolah" id="namaSekolah" placeholder="Nama
Sekolah" />
<button type="submit" class="my-button" id="btnDaftar">Daftar</button>
</form>
</div>
</div>
</center>
</div>
<script>
var button = document.getElementById("btnDaftar");

var namaSekolah = document.getElementById("namaSekolah");
var info = document.getElementById("info");
var infoText = document.getElementById("userInfo");
//console.log(namaLengkap.value);
e.preventDefault();
var action = "";

9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
if(namaSekolah.value == "" || namaSekolah.value == null){

//alert("Nama Tidak Boleh Kosong!");
alert.innerHTML = "Nama Sekolah Tidak Boleh Kosong!";
namaSekolah.focus();
}else if(email.value == "" || email.value == null){
//alert("Email Address Tidak Boleh Kosong!");
email.focus();
email.focus();
}
namaSekolah.setAttribute("readonly", "readonly");

button.innerHTML = "Daftar";
namaSekolah.removeAttribute("readonly");
}
function clearValue(){
namaSekolah.setAttribute("value", "");
email.setAttribute("value", "");
}
$.ajax({
type: "POST",
dataType: "JSON",
data: {
nama: namaSekolah.value,
email: email.value
},
url: "{base_url}AjaxProcess/daftarSekolah",
//console.log(data.result.error);
var error = data.result.error;
if(status != "FAILED" && (error == "" || error == null)){
info.setAttribute("style","display:block;");
infoText.innerHTML = "<b>Berhasil</b> Silahkan login!<br />Password Anda : <b>"+ data.result.pass
+"</b>";
openForm();
clearValue();
}else if(error == "SEKOLAH"){
//alert("Maaf NISN sudah terdaftar!");
warning.innerHTML = "<b>Maaf!</b> Nama Sekolah Sudah Terdaftar!";
openForm();
namaSekolah.focus();
}else if(error == "Email"){
//alert("Maaf Email sudah terdaftar!");
warning.innerHTML = "<b>Maaf!</b> Email Sudah Terdaftar!";
openForm();
clearValue();
email.focus();
}else{
location.reload();
}
},
alert('Sorry! But Something Wrong! Please try again!');
location.reload();
}
});
//console.log("OK!");
}
});
</script>
Listing Login Sebagai Sekolah

<center>
<div class="col-md-12 col-form login">

<h1 class="title-form">LOGIN SEKOLAH</h1>
<h3 class="subtitle-form">Selamat Datang. Login.</h3>
<div class="col-md-6">{alert}</div>
</div>
<input type="password" class="my-form" name="pass" id="pass" placeholder="Password" />
<button type="submit" class="my-button" id="btnLogin">Login</button>
</form>
</div>
</div>
</center>
</div>
<script>
var button = document.getElementById("btnLogin");

var pass = document.getElementById("pass");
e.preventDefault();
var action = "";

9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
if(email.value == "" || email.value == null){

//alert("Email Tidak Boleh Kosong!");
alert.innerHTML = "Email Tidak Boleh Kosong!";
email.focus();
email.focus();
}else if(pass.value == "" || pass.value == null){
//alert("Password Tidak Boleh Kosong!");
alert.innerHTML = "Password Tidak Boleh Kosong!";
pass.focus();
}
pass.setAttribute("readonly", "readonly");

pass.removeAttribute("readonly");
button.innerHTML = "Login";
}
$.ajax({
type: "POST",
dataType: "JSON",
data: {
email: email.value,
pass: pass.value
},
url: "{base_url}AjaxProcess/loginSekolah",
//console.log(data);
switch(status){
case "YES":
//console.log("Berhasil!");
location.href = "{base_url}Sekolah/dashboard";
break;
case "PASS":
//console.log("pass!");
//alert("Maaf password anda salah!");
warning.removeAttribute("style");
warning.innerHTML = "<b>Maaf!</b> Password salah!";
openForm();
pass.focus();
break;
case "EMAIL":
//console.log("email!");
//alert("Maaf email belum terdaftar!");
warning.innerHTML = "<b>Maaf!</b> Email belum terdaftar!";
openForm();
email.focus();
break;
default:
location.reload();
break;
}
},
}
});
}
});
</script>
Listing login Sebagai Peserta

<center>
<div class="col-md-12 col-form login">

<h1 class="title-form">LOGIN PESERTA</h1>
<h3 class="subtitle-form">Selamat Datang. Login.</h3>
<div class="col-md-6">{alert}</div>
</div>
<input type="password" class="my-form" name="pass" id="pass" placeholder="Password" />
<button type="submit" class="my-button" id="btnLogin">Login</button>
</form>
</div>
</div>
</center>
</div>
<script>
var button = document.getElementById("btnLogin");

var pass = document.getElementById("pass");
e.preventDefault();
var action = "";

9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
if(email.value == "" || email.value == null){

//alert("Email Tidak Boleh Kosong!");
alert.innerHTML = "Email Tidak Boleh Kosong!";
email.focus();
email.focus();
}else if(pass.value == "" || pass.value == null){
//alert("Password Tidak Boleh Kosong!");
alert.innerHTML = "Password Tidak Boleh Kosong!";
pass.focus();
}
pass.setAttribute("readonly", "readonly");

pass.removeAttribute("readonly");
button.innerHTML = "Login";
}
$.ajax({
type: "POST",
dataType: "JSON",
data: {
email: email.value,
pass: pass.value
},
url: "{base_url}AjaxProcess/loginPeserta",
//console.log(data);
switch(status){
case "YES":
//console.log("Berhasil!");
location.href = "{base_url}Peserta/dashboard";
break;
case "PASS":
//console.log("pass!");
//alert("Maaf password anda salah!");
warning.innerHTML = "<b>Maaf!</b> Password salah!";
openForm();
pass.focus();
break;
case "EMAIL":
//console.log("email!");
//alert("Maaf email belum terdaftar!");
warning.innerHTML = "<b>Maaf!</b> Email belum terdaftar!";
openForm();
email.focus();
break;
default:
location.reload();
break;
}
},
}
});
}
});
</script>
Listing Lainnya [LATAR BELAKANG]

<h2><b>{judul}</b></h2>
</div>
<p>{isi}</p>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>-->

</div>
<ul class="list-partner" style="margin:0px; padding:0px;">
<li><a href="http://www.imiawards.org.uk/"><img src="{base_url}public/images/partner4.gif"></a></li>
<li><a href="http://www.cisco.com/"><img src="{base_url}public/images/partner5.jpg"></a></li>
</ul>
</div>
</div>
Lainnya(Latar Belakang)
Menu lainnya (Latar Belakang) = dasar dasar pembuatan PSB online

Aaxxxx

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Aaxxxx

Diunggah oleh

Hak Cipta:

Format Tersedia

TUGAS

Dosen : Tri Sulistyorini

FAKULTAS TEKNOLOGI INDUSTRI

Menu Beranda = Akan mengarahkan ke tampilan utama dari web.

Menu Registrasi = Untuk calon peserta didik mendaftarkan diri.

<div class="col-md-12 about">

<!--<div class="col-md-12 pie-chart">

<div class="col-md-12 partner">

<!--<div class="col-md-12 pie-chart">

<div class="col-md-12 partner">

<div class="col-md-12" style="text-align:left;">

Listing Registrasi Peserta

<div class="col-md-12 col-title-form">

var button = document.getElementById("btnDaftar");

var action = "";

if(nisn.value == "" || nisn.value == null){

button.setAttribute("class", "my-button button-loading");

Listing Registasi Sebagai Sekolah

<div class="col-md-12 col-title-form">

var button = document.getElementById("btnDaftar");

var action = "";

if(namaSekolah.value == "" || namaSekolah.value == null){

button.setAttribute("class", "my-button button-loading");

Listing Login Sebagai Sekolah

<div class="col-md-12 col-title-form">

var button = document.getElementById("btnLogin");

var action = "";

if(email.value == "" || email.value == null){

button.setAttribute("class", "my-button button-loading");

Listing login Sebagai Peserta

<div class="col-md-12 col-title-form">

var button = document.getElementById("btnLogin");

var action = "";

if(email.value == "" || email.value == null){

button.setAttribute("class", "my-button button-loading");

Listing Lainnya [LATAR BELAKANG]

<!--<div class="col-md-12 pie-chart">

<div class="col-md-12 partner">

Anda mungkin juga menyukai