Belajar Web Untuk Persiapan Ukk PDF

BELAJAR WEB UNTUK PERSIAPAN UKK (UJI KOMPETENSI KEJURUAN) SMK DWI
WARNA DAN SMK TARUNA TEKNO NUSANTARA
Dalam mempersiapkan pelaksaan UKK (Uji Kompetensi Kejuruan) pada SMK (Sekolah Menengah
Kejurusan) diperlukan sebuah pelatihan sebelum pra UKK, agar siswa-siswi dalam mempelajari
dengan baik rancang bangun website dengan menggunakan bahasa pemrogram HTML dan PHP.
1. SOFTWARE YANG DI INSTAL PADA LAPTOP/KOMPUTER

a. XAMPP
b. Adobe Dreamweaver CS3
2. (SESSION 1) akan berlanjut ke (SESSION 2) minggu depan ya..heeheee

3. Membuat database dengan nama “arsip_surat”
4. Membuat beberapa tabel dalam database “surat masuk” seperti tabel :
a. tbl_halaman column/kolom 3
b. tbl_petugas column/kolom 4
5. Buka XAMPP Panel, aktifkan apache ->start dan mysql -> start.
6. Buka mozila firefox dan ketikan pada situs “localhost/phpmyadmin” -> enter
7. Halaman desktop “phpmyadmin” seperti gambar dibawah ini :
Rizky Pratama Lubis, ST PEMROGRAM 23 Januari 2018

8. Pilih menu basis data / databases -> klik
9. Buat database dengan nama “arsip_surat” dan klik buat / create, seperti gambar dibawah:
10. Buat tabel database dengan nama “ tbl_halaman” column/kolom sebanyak 3” :
11. Klik tombol kirim / go. Oke..lanjut

12. Isi field dari tbl_halaman seperti gambar dibawah ini :
13. Klik tombol simpan / save. Oke..lanjut

14. Tampilan tabel yang telah selesai seperti gambar dibawah ini :

15. Klik tombol menu insert /tambahkan pada untuk mengisi data pada tbl_halaman seperti
gambar dibawah ini :
16. Id kosongkan, setelah di isi tekan tombol kirim/go.

17. Buat tabel database dengan nama “ tbl_petugas” column/kolom sebanyak 4” :
18. Klik tombol kirim / go. Oke kita lanjut..

19. Isi field dari tbl_petugas seperti gambar dibawah ini :
20. Klik tombol simpan / save.. oke kita lanjut.

21. Tampilan tabel yang dibuat pada database “arsip_surat” seperti dibawah ini :

22. Pembuatan database dan tabel di dalam database telah selesai, tahap selanjutnya kita akan
membuat folder pada DRIVE C : XAMPP->HTDOC->buat folder “arsip_surat”, seperti
gambar dibawah ini :
23. Buka folder “arsip_surat” dan buat folder baru didalam folder arsip_surat dengan nama “lib”
kita akan membuat file format .php dengan nama “koneksi.php” yang menghubungkan
database “arsip_surat” dengan aplikasi web. Seperti script .php dibawah ini :
<?php
//header sesuaikan dengan nama database xampp
$server="localhost";
$user="root";
$pass="";
$db="surat_arsip";
//bila terhubung kodingnya dibawah ini

$konek=mysqli_connect($server, $user, $pass, $db);
//bila tidak terhubung dengan database maka kodingnya dibawah ini

if(!$konek)
{
die('tidak terhubung');
}
?>
24. Simpan di drive c: xampp->htdoc->arsip_surat->lib->koneksi.php
25. Oke kita lanjut...
26. Membuat file .php dengan nama “index.php” sebagai file utama dari website.
27. Script .php seperti dibawah ini :
<?php
//memulai
session_start();
//mengenali MEMBER_LOGIN
define("USER","1");

//MENGHUBUNGKAN DENGAN KONEKSI.PHP
include('./lib/koneksi.php');
//MEMANGGIL HALAMAN HOME.PHP

include('./home.php');
?>
28. Simpan di drive c: xampp->htdoc->arsip_surat->index.php
29. Oke dah siap ngetik..hee..hee, kita lanjut.
30. Kita akan membuat “style.css” , dengan script .css dibawah ini :
/*membuat format tulisan web*/
body{
font-family:arial;
}
/*membuat lebar, bolder, letak, warna web*/

menu{
margin:10px auto;
background:#0ff;
padding:5;
width:600px;
}
/*membuat warna background "menu spasi .sub" seperti dibawah ini*/

menu .sub{
padding:10px;
background:#fff;
margin:5px;
}
31. Simpan di drive c: xampp->htdoc->arsip_surat->style.css

32. Oke dah siap ngetik..hee..hee, kita lanjut.
33. Selanjutnya membuat file .php dengan nama “home.php”, script dibawah ini :
<html>

<link rel="stylesheet" href="style.css">
<body>
<menu>
<div>


<div id="1" class="sub">
<img src="masukan gambar, cth:RPL.png" width="550px" height="70px">
</div>

<?php
if(!isset($_SESSION['MEMBER_LOGIN']))

{
?>
<a href="index.php">Home<a/> | <a href="?mod=petugas">petugas</a> | <a
href="?mod=login">Login</a>
<?php
}else{
?>
<a href="nanti isi">Surat Masuk</a> | <a href="nanti isi">Surat Keluar</a> | <a href="nanti
isi">Agenda</a>
<?php
}
?>
</div>


<p><?php include('./mod/gateway.php'); ?></p>
</div>


<p>rizkypratamlubs(RPL)@2018</p>
</div>
</div>
</menu>
</body>
</html>
34. Simpan di drive c: xampp->htdoc->arsip_surat->home.php

35. Tampilan web telah selesai dengan mengetik pada situs mozila fire “localhost/arsip_sura”-
>enter
36. Kita akan membuat folder “mod” seperti gambar dibawah ini :
37. Membuat file .php dengan nama “gateway.php” di dalam folder “mod”, dengan script
dibawah ini :
<?php
if(isset($_GET['mod']))

{
switch($_GET['mod'])
{
case 'home':include('./mod/home/home.php'); break;
case 'petugas':include('./mod/petugas/petugas.php'); break;
default : include('./mod/home/home.php');
}
}else{
include('./mod/home/home.php');
}
?>
38. Simpan di drive c: xampp->htdoc->arsip_surat->mod->gateway.php
39. Tidak panjang lebar, capek juga nih...heehee
40. Buat folder baru dengan nama “home” di dalam folder “mod”
41. Buat file .php dengan nama “home.php” didalam folder home yang tadi dibuat.
42. Ketikan script file home.php dibawah ini :
<?php
$q=mysqli_query($konek, "select * from tbl_halaman where nama='home'");
$r=mysqli_fetch_array($q);
echo $r['isi'];
?>
43. Simpan di drive c: xampp->htdoc->arsip_surat->mod->home->home.php
44. Maka hasilnya akan tampil seperti gambar dibawah ini :
45. Halaman menu home dan isi/content halaman home telah selesai.
46. Buat folder baru dengan nama “petugas”, di dalam folder “mod”.
47. Ketikan script .php untuk file “petugas.php”, seperti dibawah ini :
<fieldset>
<legend>Daftar Petugas</legend>

<form action="./mod/petugas/vpetugas.php" method="post">
<table>
<tr><td>Nama Lengkap</td><td><input type="text" name="nama"></td></tr>
<tr><td>Username</td><td><input type="text" name="username"></td></tr>
<tr><td>Password</td><td><input type="password" name="pass"></td></tr>
<tr><td><input type="submit" value="Kirim"><input type="reset"

value="Reset"></td></tr></table>
</form>
</fieldset>
48. Simpan di drive c: xampp->htdoc->arsip_surat->mod->petugas->petugas.php
49. Dan kita buat file .php dengan nama “vpetugas.php” bahasa prosesnya, script dibawah :
<?php
include('../../lib/koneksi.php');
$q=mysqli_query($konek, "insert into tbl_petugas(nama, username, pass) values(
'".$_POST['nama']."',
'".$_POST['username']."',
'".md5($_POST['pass'])."')");
if($q)
{
?>
<script type="text/javascript">
document.location.href='../../index.php?mod=login';
</script>
<?php
}else{
?>
document.location.href='../../index.php?mod=petugas';
</script>
<?php
}
?>
50. Simpan di drive c: xampp->htdoc->arsip_surat->mod->petugas->vpetugas.php

Jadi terdapat 2 (dua) file .php didalam folder “petugas”. Seperti gambar dibawah ini :
51. Maka jalankan aplikasinya di mozila firefox, ketikan situs : “localhost/arsip_surat->enter

52. Isi data pada kolom halaman petugas dan klik tombol kirim untuk mengirim data ke dalam
database mysql phpmyadmin, seperti gambar dibawah ini :
53. SELESAI YA MURID-MURID, SCRIPT NYA DI KETIK YA JANGAN DI COPY PASTE.

54. Kita akan membuat halaman login
55. Buat folder baru dengan nama folder “login”, di dalam folder “mod” seperti gambar dibawah
ini:
56. Buat file .php di dalam folder login dengan nama “login.php” untuk desain, koding dibawah
ini:
<fieldset>
<legend>Login Petugas</legend>
<form action="./mod/login/vlogin.php" method="post">
<table>
<tr><td>Username</td><td><input type="text" name="username"></td><tr>
<tr><td>Password</td><td><input type="password" name="pass"></td></tr>
<tr><td><input type="submit" value="Login">| <input type="reset" value="Reset"></td><tr>

</table>
</form>
</fieldset>
57. Simpan di drive c: xampp->htdoc->arsip_surat->mod->login->login.php

58. Maka desain koding diatas akan menampilkan gambar dibawah ini bila dijalankan.
59. Selanjutnya kita membuat proses desainnya dengan nama “vlogin” simpan di dalam folder
yang sama di folder login, kodingnya seperti gambar dibawah ini:
<?php
include('../../lib/koneksi.php');
$q=mysqli_query($konek,"select * from tbl_petugas where username='".$_POST['username']."' and

pass='".md5($_POST['pass'])."'");
if(mysqli_num_rows($q)>0)
{
session_start();
$r=mysqli_fetch_array($q);
$_SESSION['MEMBER_LOGIN']='1';
$_SESSION['MEMBER_ID']=$r['id_petugas'];
$_SESSION['MEMBER_NAMA']=$r['nama'];
?>
document.location.href='../../index.php?mod=surat_masuk';
</script>
<?php
}else{
?>
document.location.href='../../index.php?mod=login';
</script>
<?php
}
?>
60. Simpan di drive c: xampp->htdoc->arsip_surat->mod->login->vlogin.php

61. Session one (1) selesai
62. Session two (2) minggu depan saya buat lagi untuk halaman login dan halaman surat masuk.

SEE YOU NEXT TIME.... 
SOON.... 
JANGAN LUPA DI KETIKAN SCRIPT (KODING) NYA OKE...
DON’T COPAS-COPAS...

Belajar Web Untuk Persiapan Ukk PDF

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

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

Belajar Web Untuk Persiapan Ukk PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

BELAJAR WEB UNTUK PERSIAPAN UKK (UJI KOMPETENSI KEJURUAN) SMK DWI

WARNA DAN SMK TARUNA TEKNO NUSANTARA

1. SOFTWARE YANG DI INSTAL PADA LAPTOP/KOMPUTER

2. (SESSION 1) akan berlanjut ke (SESSION 2) minggu depan ya..heeheee

7. Halaman desktop “phpmyadmin” seperti gambar dibawah ini :

Rizky Pratama Lubis, ST PEMROGRAM 23 Januari 2018

10. Buat tabel database dengan nama “ tbl_halaman” column/kolom sebanyak 3” :

11. Klik tombol kirim / go. Oke..lanjut

13. Klik tombol simpan / save. Oke..lanjut

Rizky Pratama Lubis, ST PEMROGRAM 23 Januari 2018

16. Id kosongkan, setelah di isi tekan tombol kirim/go.

18. Klik tombol kirim / go. Oke kita lanjut..

20. Klik tombol simpan / save.. oke kita lanjut.

Rizky Pratama Lubis, ST PEMROGRAM 23 Januari 2018

//bila terhubung kodingnya dibawah ini

//bila tidak terhubung dengan database maka kodingnya dibawah ini

Rizky Pratama Lubis, ST PEMROGRAM 23 Januari 2018

//MEMANGGIL HALAMAN HOME.PHP

/*membuat lebar, bolder, letak, warna web*/

/*membuat warna background "menu spasi .sub" seperti dibawah ini*/

31. Simpan di drive c: xampp->htdoc->arsip_surat->style.css

Rizky Pratama Lubis, ST PEMROGRAM 23 Januari 2018

34. Simpan di drive c: xampp->htdoc->arsip_surat->home.php

Rizky Pratama Lubis, ST PEMROGRAM 23 Januari 2018

Rizky Pratama Lubis, ST PEMROGRAM 23 Januari 2018

<tr><td><input type="submit" value="Kirim"><input type="reset"

50. Simpan di drive c: xampp->htdoc->arsip_surat->mod->petugas->vpetugas.php

51. Maka jalankan aplikasinya di mozila firefox, ketikan situs : “localhost/arsip_surat->enter

Rizky Pratama Lubis, ST PEMROGRAM 23 Januari 2018

53. SELESAI YA MURID-MURID, SCRIPT NYA DI KETIK YA JANGAN DI COPY PASTE.

<tr><td>Username</td><td><input type="text" name="username"></td><tr>

<tr><td>Password</td><td><input type="password" name="pass"></td></tr>

<tr><td><input type="submit" value="Login">| <input type="reset" value="Reset"></td><tr>

Rizky Pratama Lubis, ST PEMROGRAM 23 Januari 2018

57. Simpan di drive c: xampp->htdoc->arsip_surat->mod->login->login.php

$q=mysqli_query($konek,"select * from tbl_petugas where username='".$_POST['username']."' and

60. Simpan di drive c: xampp->htdoc->arsip_surat->mod->login->vlogin.php

Rizky Pratama Lubis, ST PEMROGRAM 23 Januari 2018

JANGAN LUPA DI KETIKAN SCRIPT (KODING) NYA OKE...

Rizky Pratama Lubis, ST PEMROGRAM 23 Januari 2018

Anda mungkin juga menyukai

/membuat lebar, bolder, letak, warna web/

/membuat warna background "menu spasi .sub" seperti dibawah ini/