Membuat website sekolah dengan HTML CSS PHP.pptx

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

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

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

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

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

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

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

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

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

Hasil perubahan file index.php setelah diubah menjadi seperti gambar berikut
index.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

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

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

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

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

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!

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.

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

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!

1. TAMPILAN HALAMAN HOME (index.php)
Halaman Home
Gambar panggil
dari tb_about pada
database
dbsekolah_001
berdasarkan file
dengan id=1

2. TAMPILAN HALAMAN ABOUT
Halaman About
Ketrangan
panngil dari
tb_about pada
database
dbsekolah_001
berdasarkan
keterangan
dengan id=1

3. TAMPILAN HALAMAN JURUSAN
Halaman Jurusan
Menampilkan data
dari tb_jurusan
pada database
dbsekolah_001

4. TAMPILAN HALAMAN GURU
Halaman Guru
Menampilkan data
dari tb_guru pada
database
dbsekolah_001

5. TAMPILAN HALAMAN KELAS
Halaman Kelas
Menampilkan data
dari tb_kelas pada
database
dbsekolah_001

6. TAMPILAN HALAMAN SISWA
Halaman Siswa
Menampilkan data
dari tb_siswa pada
database
dbsekolah_001

SEKIAN & TERIMA KASIH
Created by RPL SMKN 1 Kuwus
END

Membuat website sekolah dengan HTML CSS PHP.pptx

Recommended

Recommended

More Related Content

Similar to Membuat website sekolah dengan HTML CSS PHP.pptx

Similar to Membuat website sekolah dengan HTML CSS PHP.pptx (20)

Membuat website sekolah dengan HTML CSS PHP.pptx