1. Membuat website sekolah dengan
HTML CSS PHP dan MYSQL
PEMROGRAMAN WEB DAN PERANGKAT BERGERAK
Created by RPL SMKN 1 Kuwus
BEGIN

2. Pindahkan File Project HTML ke Folder htdocs
Copy Folder Project HTML Website kita
Buka Drive C -> XAMPP -> htdocs
Paste Folder Project HTML yang telah di-copy
Folder Website kita
Drive C – XAMPP - htdocs

3. Mengubah file project HTML ke PHP
 Buka Text Editor Visual Studio Code
 Plih File – Open Folder
 Cari Folder Project kita pada Drive C – XAMPP – htdocs
 Buka Folder Website(Maklon - WebsiteSekolah) kita - Pilih Select Folder
 Klik kanan pada file HTML dan ubah tipe .html menjadi .php
 Hasilnya seperti gambar berikut:
File html File PHP

4. Menjalankan Project PHP kita pada Web Browser Chrome
 Jalankan XAMPP (Apache dan MYSQL)
 Buka Web browser chrome
 Ketik alamat website (url) project kita : localhost/maklon/websiteSekolah
 Lihat Hasilnya seperti gambar berikut:
Alamat Website
project kita:
localhost/maklon/websiteSekolah
Tampilan Website kita
menggunakan Bahasa
Pemrograman PHP

5. Mengubah Struktur Project Website PHP
Image
Video
head.php
header.php
navbar.php
footer.php
about.php
guru.php
index.php
jurusan.php
kelas.php
siswa.php
File PHP baru yang akan dipanggil pada semua
halaman menggunakan INCLUDE
File PHP lama yang akan diubah strukturnya
sehingga lebih sederhana
koneksi.php File PHP untuk koneksi ke database

6. Mengubah Struktur Project Website PHP
LANGKAH 1. Mengubah File index.php
1. Cut (Potong) bagian Elemen head pada file index.php
2. Buat file baru dengan nama head.php
3. Paste Elemen head yang dipotog tadi pada file head.php
4. Save file head.php
head.php

7. Mengubah Struktur Project Website PHP
LANGKAH 1. Mengubah File index.php
1. Cut (Potong) bagian Elemen header pada file index.php
2. Buat file baru dengan nama header.php
3. Paste Elemen header yang dipotog tadi pada file header.php
4. Save file header.php
header.php

8. Mengubah Struktur Project Website PHP
LANGKAH 1. Mengubah File index.php
1. Cut (Potong) bagian Elemen navbar pada file index.php
2. Buat file baru dengan nama navbar.php
3. Paste Elemen navbar yang dipotog tadi pada file navbar.php
4. Save file navbar.php
navbar.php

9. Mengubah Struktur Project Website PHP
LANGKAH 1. Mengubah File index.php
1. Cut (Potong) bagian Elemen footer pada file index.php
2. Buat file baru dengan nama footer.php
3. Paste Elemen footer yang dipotog tadi pada file footer.php
4. Save file footer.php
footer.php

10. Mengubah Struktur Project Website PHP
LANGKAH 1. Mengubah File index.php
Hasil perubahan file index.php setelah diubah menjadi seperti gambar berikut
index.php

11. Mengubah Struktur Project Website PHP
LANGKAH 2. Mengubah File about.php
Hapus semua elemen head, header, navbar dan footer pada file about.php
Hasil perubahan file about.php setelah diubah menjadi seperti gambar berikut
about.php

12. Mengubah Struktur Project Website PHP
LANGKAH 3. Mengubah File guru.php
Hapus semua elemen head, header, navbar dan footer pada file guru.php
Hasil perubahan file guru.php setelah diubah menjadi seperti gambar berikut
guru.php

13. Mengubah Struktur Project Website PHP
LANGKAH 4. Mengubah File jurusan.php
Hapus semua elemen head, header, navbar dan footer pada file jurusan.php
Hasil perubahan file jurusan.php setelah diubah menjadi seperti gambar berikut
jurusan.php

14. Mengubah Struktur Project Website PHP
LANGKAH 5. Mengubah File kelas.php
Hapus semua elemen head, header, navbar dan footer pada file kelas.php
Hasil perubahan file kelas.php setelah diubah menjadi seperti gambar berikut
kelas.php

15. Mengubah Struktur Project Website PHP
LANGKAH 6. Mengubah File siswa.php
Hapus semua elemen head, header, navbar dan footer pada file siswa.php
Hasil perubahan file siswa.php setelah diubah menjadi seperti gambar berikut
siswa.php

16. Mengubah Struktur Project Website PHP
LANGKAH 7. Panggil file head.php, header.php, navbar.php dan footer.php di dalam file
index.php, about.php, guru.php, jurusan.php, kelas.php dan siswa.php menggunakan
function PHP “include”
Perubahannya dapat kita praktek langsung!

17. Menjalankan hasil perubahan project yang selesai diubah
 Jalankan XAMPP (Apache dan MYSQL)
 Buka Web browser chrome
 Ketik alamat website (url) project kita : localhost/maklon/websiteSekolah
 Lihat Hasilnya seperti gambar berikut:
Alamat Website
project kita:
localhost/maklon/websiteSekolah
Tampilan Website setelah
proses perubahan tetap
hasinya sama dan dapat
berjalan dengan baik.

18. Membuat koneksi website dengan Database MYSQL serta
menampilkan data dari database ke dalam website
LANGKAH 1. Buat file baru dengan nama koneksi.php
koneksi.php

19. Membuat koneksi website dengan Database MYSQL serta
menampilkan data dari database ke dalam website
LANGKAH 2. Menampilkan data dari table tb_about pada database
dbsekolah_001 di halaman about.php dan halaman home.php
LANGKAH 3. Menampilkan data dari table tb_jurusan pada database
dbsekolah_001 di halaman jurusan.php
LANGKAH 4. Menampilkan data dari table tb_guru pada database
dbsekolah_001 di halaman guru.php
LANGKAH 5. Menampilkan data dari table tb_kelas pada database
dbsekolah_001 di halaman kelas.php
LANGKAH 6. Menampilkan data dari table tb_siswa pada database
dbsekolah_001 di halaman siswa.php
Caranya kita praktek langsung!

20. Membuat koneksi website dengan Database MYSQL serta
menampilkan data dari database ke dalam website
1. TAMPILAN HALAMAN HOME (index.php)
Halaman Home
Gambar panggil
dari tb_about pada
database
dbsekolah_001
berdasarkan file
dengan id=1

21. Membuat koneksi website dengan Database MYSQL serta
menampilkan data dari database ke dalam website
2. TAMPILAN HALAMAN ABOUT
Halaman About
Ketrangan
panngil dari
tb_about pada
database
dbsekolah_001
berdasarkan
keterangan
dengan id=1

22. Membuat koneksi website dengan Database MYSQL serta
menampilkan data dari database ke dalam website
3. TAMPILAN HALAMAN JURUSAN
Halaman Jurusan
Menampilkan data
dari tb_jurusan
pada database
dbsekolah_001

23. Membuat koneksi website dengan Database MYSQL serta
menampilkan data dari database ke dalam website
4. TAMPILAN HALAMAN GURU
Halaman Guru
Menampilkan data
dari tb_guru pada
database
dbsekolah_001

24. Membuat koneksi website dengan Database MYSQL serta
menampilkan data dari database ke dalam website
5. TAMPILAN HALAMAN KELAS
Halaman Kelas
Menampilkan data
dari tb_kelas pada
database
dbsekolah_001

25. Membuat koneksi website dengan Database MYSQL serta
menampilkan data dari database ke dalam website
6. TAMPILAN HALAMAN SISWA
Halaman Siswa
Menampilkan data
dari tb_siswa pada
database
dbsekolah_001

26. SEKIAN & TERIMA KASIH
Created by RPL SMKN 1 Kuwus
END