Cara membuat website sekolah dengan php dan mysql

Source code website sekolah yang akan saya bagi pada kesempatan ini adalah aplikasi yang didevelop menggunakan php, mysql dan bootstrap. Walaupun masih sederhana dan juga ada beberapa fitur yang belum tersedia, namun demikian aplikasi ini sangat disarankan buat dijadikan materi pembelajaran develop program menggunakan php. Simak juga source code aplikasi yang sudah admin bagikan sebelumnya, yaitu Source code aplikasi absensi siswa berbasis web.

Table of Contents Show

Langkah Awal Membuat Website dengan PHP?
Langkah langkah membuat website sekolah?
Langkah langkah membuat website dengan HTML?
Langkah langkah membuat website dengan HTML dan CSS?

Program website sekolah menggunakan php ini masih memerlukan perbaikan lagi, dimana kita bisa mengembangkan kembali source code aplikasi ini baik dari segi tampilan maupun menambahkan fitur yang belum ada, sehingga menjadi sebuah program aplikasi berbasis web yang lebih baik lagi, baik itu pada sisi fiturnya ataupun didalam penggunaan dari program tersebut.

Deretan fitur yang tersedia dalam aplikasi website sekolah berbasis php dan mysql ini dapat anda lihat pada preview berikut :

Program website sekolah siap pakai ini dapat anda aplikasikan, Aplikasi ini dapat dioperasikan secara online maupun offline dan sangat gampang untuk dipakai.

Aplikasi ini juga dibagikan secara gratis di blog klikmasagena. com, bagi anda yang sudah mengunduh dan ingin memberikan donasi, silahkan lihat kontaknya langsung di blog tersebut.

Cara menggunakan :

1. Download terlebih dahulu source code website sekolah
2. Extract file source code
3. Copy folder source code di dalam folder htdocs – jika menggunakan xampp
4. Buat database baru di phpmyadmin
5. Setting koneksi database pada file koneksi
6. Buka aplikasi di browser sesuai dengan nama folder pada htdocs (localhost/nama_web)

Jika sobat berminat mempelajari atau ingin mengembangkan program website sekolah ini. Silahkan anda unduh source code aplikasi web sekolah menggunakan php dan mysql ini sebagai referensi pembelajaran pembuatan program dengan menggunakan php, pada tautan download berikut ini. Website sekolah

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Berikut adalah sintak dan urutan pembuatan web sekolah sederhana dengan PHP dan MySql

Buat database dengan nama websekolah dan tabel tbl_pengguna dan tbl_berita pada phpmyadmin dengan skema seperti berikut :

tbl_pengguna

tbl_berita

Buat folder di dalam htdocs dengan nama websekolah
Buat file index.php dengan sintak seperti berikut ini :

<!DOCTYPE html>
<html>
    <head>
        <title>Web Sekolah</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div>
            <div class="kepala"> 
                <img src="gambar/banner.jpg" width="100%" height="100%">  
            </div>

            <div id="menu">   
                <ul>
                    <li><a href="index.php?halaman=home">Home</a></li>
                    <li><a href="index.php?halaman=profile">Profile</a></li>
                    <li><a href="index.php?halaman=sejarah">Sejarah</a></li>
                    <li><a href="index.php?halaman=ekskul">Ekskul</a></li>
                    <li><a href="index.php?halaman=berita">Berita</a></li>
                    <li><a href="index.php?halaman=login">Login</a></li>
                </ul>
            </div>

            <div class="konten">   
                <div class="sidebar">   
                    <img src="gambar/bannerkiri.jpg" width="100%" height="100%">  
                </div>

                <div class="berita">   
                    <?php
                        if(isset($_GET['halaman'])){
                            $hal=$_GET['halaman'];
                            
                            switch($hal){
                                case 'home':
                                    include "halaman/home.php";
                                    break;
                                    
                                case 'profile':
                                    include "halaman/profile.php";
                                    break;

                                case 'sejarah':
                                    include "halaman/sejarah.php";
                                    break;
                                    
                                case 'ekskul':
                                    include "halaman/ekskul.php";
                                    break;

                                case 'berita':
                                    include "halaman/berita.php";
                                    break;

                                case 'login':
                                    include "halaman/login.php";
                                    break;

                                case 'tambahberita':
                                    include "halaman/tambahberita.php";
                                    break;

                                default :
                                    echo "<h2>Maaf halaman yang anda tuju tidak ada</h2>";
                                    break;
                            }
                        }
                        else{
                            include "halaman/home.php";
                        }
                    ?>
                </div>

                <div style="clear:both;"></div>
            </div>

            <div class="kaki">  
                <?php 
                    include "footer.php"
                ?>
            </div>
        </div>
    </body>
</html>

Buat file footer.php dengan sintak seperti berikut ini :

<h3>Social Media Kami</h3>	
<ul>
    <li><a target="_blank" href="https://www.facebook.com/SMKNegeri1cimahi"><span class="title screen-reader-text">Facebook</span></a></li>
    <li><a target="_blank" href="https://twitter.com/smkn1cmi"><span class="title screen-reader-text">twitter</span></a></li>
    <li><a target="_blank" href="https://www.youtube.com/c/SMKNEGERI1CIMAHI"><span class="title screen-reader-text">youtube</span></a></li>
    <li><a target="_blank" href="https://www.instagram.com/smkn1cmi/"><span class="title screen-reader-text">instagram</span></a></li>
</ul>

<p>Ayo Follow dan Ikuti informasi seputar kegiatan di SMK Negeri 1 Cimahi di social media kami.</p>

Buat file koneksi.php dengan sintak seperti berikut ini :

<?php
    $host       = "localhost";
    $user       = "root";
    $password   = "";
    $namadb     = "websekolah";

    $varkoneksi=mysqli_connect($host,$user,$password,$namadb);

    if(!$varkoneksi){
        echo "tidak koneksi";
    }
?>

Buat file style.css dengan sintak seperti berikut ini :

h2{
    color: red;
    text-align: center;
}

.kepala{
    height: 200px;
    margin: 20px 10px;
    border-radius: 8px;
}

#menu{
    background-color: rgb(24, 187, 236);
    height: 50px;
    margin: 20px 10px;
    border-radius: 8px;
    
}

#menu ul li{
    float: left;
    padding: 15px;
    list-style: none;
    text-transform:uppercase;
}

#menu ul li a {
    display:block;
    padding:0 20px;
    text-decoration:none;
    color:#2c2c2c;
    font-family: sans-serif;
    font-size:13px;
    font-weight:400;
    transition:all 0.3s ease-in-out;
}

#menu ul li a:hover,
#menu ul li a.hoverover {
    cursor: pointer;
    color:red;
}

.konten{
    overflow:hidden;
    width: 100%;
}

.sidebar{
    background-color: rgb(231, 237, 245);
    width: 20%;
    float: left;
    height: 800px;
    margin-left: 10px;
    border-radius: 8px;
    padding: 20px;
}

.berita{
    background-color: rgb(231, 237, 245);
    height: 800px;   
    margin-right: 10px;
    border-radius: 8px;
    width: 70%;
    float: right;
    padding: 20px;
}

.berita img{
    float:left;
    margin-right:10px;
    width:200px;
    height:165px
}

.kaki{
    background-color: rgb(24, 187, 236);
    height: 150px;
    margin: 20px 10px;
    border-radius: 8px;
    padding: 20px;
}

Buat folder halaman dan gambar di dalam folder websekolah, dalam folder gambar tersebut simpan dile gambar dengan nama banner.jpg dan bannerkiri.jpg. Dalam folder halaman buat beberapa file dengan nama berita.php, ekskul.php, home.php, profile.php, sejarah.php, login.php, loginaksi.php, logout.php, tambahberita.php, tambahberita_aksi.php. Dengan susunan folder dan filenya seperti berikut :

File gambar :

Dan berikut masing-masing sintak dari file tersebut :

home.php

Bismillahirohmannirrohim
<p>Assalamualaikum Warahmatullah Wabarakatuh
<p>Kami mengucapkan selamat datang di Website kami Sekolah Menengah Kejuruan Negeri (SMKN) 1 Cimahi yang saya tujukan untuk seluruh unsur pimpinan, guru, karyawan dan siswa masyarakat guna dapat mengakses seluruh informasi tentang segala profil, aktifitas/kegiatan serta fasilitas sekolah kami.
<p>Kami selaku pimpinan sekolah mengucapkan terima kasih kepada tim pembuat Website ini yang telah berusaha untuk dapat lebih memperkenalkan segala perihal yang dimiliki oleh sekolah. Dan tentunya Website sekolah kami masih terdapat banyak kekurangan, oleh karena itu kepada seluruh civitas akademika dan masyarakat umum dapat memberikan saran dan kritik yang membangun demi kemajuan Website ini lebih lanjut.
<p>Saya berharap Website ini dapat dijadikan sarana interaksi yang positif baik antar warga sekolah maupun masyarakat pada umumnya sehingga sehingga informasi dapat tersampaikan dengan baik. Semoga Allah SWT memberikan kekuatan bagi kita semua untuk mencerdaskan anak-anak bangsa.
<p>Wassalamualikum wrwb

profile.php

<p><b>SMK Negeri 1 Cimahi</b> (STM Pembangunan Bandung) merupakan salah satu Lembaga Pendidikan Menengah Kejuruan di Kota Cimahi, Jawa Barat yang menyelenggarakan Program Pendidikan Kejuruan 4 Tahun, dan merupakan salah satu SMK dari 8 (delapan) SMK Negeri di Indonesia yang memiliki program 4 (empat) Tahun, yang pembangunan fisiknya dimulai sejak tahun 1969, di atas tanah seluas 3,4 Ha, dan telah menerima siswa sejak tahun 1974 dengan nama STM Negeri Pembangunan Bandung, yang diresmikan pada tanggal 24 Maret 1977.</p>
<p>Perkembangan <strong>SMK Negeri 1 Cimahi</strong> dari sejak berdiri sampai dengan tahun 1995/1996 bernama STM Pembangunan Bandung, sedangkan nama SMK Negeri 1 Cimahi &#8211; Bandung berlaku sejak tahun pelajaran 1996/1997 dengan berdasarkan SK Mendikbud No. 036/O/97.</p>
<p>Sejalan dengan otonomi daerah, dengan berpisahnya Kota Cimahi dengan Kab. Bandung, maka pada tahun pelajaran 2001/2002 STM Pembangunan Bandung yang setelahnya bernama SMK Negeri 1 Cimahi &#8211;  Bandung berubah nama menjadi SMK Negeri 1 Kota Cimahi.</p>
<p>Secara geografis SMK Negeri 1 Cimahi terletak di kawasan Industri, yang dapat dijangkau dari berbagai sudut kota Cimahi, baik dari atau ke Kota Bandung, Kabupaten Bandung dan Jakarta dengan mudah, serta dapat dengan mudah diakses oleh industri-industri yang berada di kawasan industri di Jalur Pantura Provinsi Jawa Barat. Sehingga akses yang dapat dilakukan untuk kepentingan akademik baik pembelajaran di sekolah maupun di luar sekolah (Dunia Usaha / Dunia Industri ) dapat dilakukan dengan baik.</p>
<p><b>Potensi Unggulan</b></p>
<p>Potensi unggulan yang ada di SMK Negeri 1 Cimahi diantaranya adalah</p>

<ol>
    <li><b>Siswa</b> : Nilai masuk siswa yang cukup tinggi merupakan potensi yang lebih mudah dalam mengembangan karena kemampuan yang dimiliki siswa dapat dengan mudah digunakan dalam penyerapan pengetahuan dan keterampilan yang harus mereka terima di sekolah.</li>
    <li><b>Program Keahlian</b> : Program Keahlian yang ada di SMK Negeri 1 Cimahi ini hampir semuanya merupakan satu-satunya program keahlian yang ada di Indonesia, kecuali untuk program ICT ada untuk yang 3 tahun tapi untuk yang 4 tahun di sekolah ini merupakan satu-satunya. Semua program keahlian perintisnya dari SMK Negeri 1 Cimahi. Hal ini merupakan suatu potensi unggulan karena dengan mudah siswa yang lulus terserap oleh industri hal ini telah berlangsung sejak berdirinya STM Pembangunan Bandung yang sekarang menjadi SMK Negeri 1 Cimahi.</li>
    <li><b>Kegiatan Pelatihan</b> : Adanya berbagai kegiatan pelatihan dari luar yang sering dilakukan di sekolah ini memudahkan sekolah berhubungan dengan dunia usaha dan dunia industri juga dalam mengadopsi kemajuan teknologi yang saat ini berkembang dengan pesat.</li>
    <li><b>English Testing Centre</b> : Sebagai pusat pelaksanaan Test TOEIC (Test Of English for International Communication) SMK Negeri 1 Cimahi merupakan pusat dalam kegiatan pembelajaran Bahasa Inggris untuk daerah Bandung dan Cimahi.</li>
    <li><b>Kegiatan Ekstra Kurikuler</b> : Berbagai jenis kegiatan ekstra kurikuler yang dilaksanakan disekolah ini telah menghasilkan beberapa prestasi baik ditingkat regional maupun di Tingkat nasional.</li>
    <li><b>Sertifikasi</b> : Adanya program sertifikasi untuk Teknik Informatika (Diploma 1 Teknik Komputer Jaringan) kerjasama dengan SEAMOLEC-ITB dan Diploma 1 Teknik Mekatronika kerjasama dengan POLMAN BANDUNG (Program Seamless Education &#8211; Pendidikan Vokasi Berkelanjutan) juga merupakan suatu unggulan bagi SMKN 1 Cimahi.</li>
</ol>

sejarah.php

<p><b>SMK Negeri 1 Cimahi</b>&nbsp;(STM Pembangunan Bandung) merupakan salah satu Lembaga Pendidikan Menengah Kejuruan di Kota Cimahi, Jawa Barat&nbsp;yang menyelenggarakan Program Pendidikan Kejuruan 4 Tahun, dan merupakan salah satu SMK dari 8 (delapan) SMK&nbsp;Negeri di Indonesia&nbsp;yang memiliki program 4 (empat) Tahun, yang pembangunan fisiknya dimulai sejak tahun 1969, di atas tanah seluas 3,4 Ha, dan telah menerima siswa sejak tahun 1974 dengan nama STM Negeri Pembangunan Bandung, yang diresmikan pada tanggal 24 Maret 1977.</p>
<p>Perkembangan&nbsp;<strong>SMK Negeri 1 Cimahi</strong>&nbsp;dari sejak berdiri sampai dengan tahun 1995/1996 bernama STM Pembangunan Bandung,&nbsp;sedangkan nama SMK Negeri 1 Cimahi – Bandung&nbsp;berlaku sejak tahun pelajaran 1996/1997 dengan berdasarkan SK Mendikbud No. 036/O/97.</p>
<p>Sejalan dengan otonomi daerah, dengan berpisahnya Kota Cimahi dengan Kab. Bandung, maka pada tahun pelajaran 2001/2002 STM Pembangunan Bandung yang setelahnya bernama SMK Negeri 1 Cimahi – &nbsp;Bandung&nbsp;berubah nama menjadi SMK Negeri 1 Kota Cimahi.</p>
<p>Secara geografis SMK Negeri 1 Cimahi terletak di kawasan Industri,&nbsp;yang dapat dijangkau dari berbagai sudut kota Cimahi, baik dari atau ke Kota Bandung, Kabupaten Bandung&nbsp;dan Jakarta&nbsp;dengan mudah, serta dapat dengan mudah diakses oleh industri-industri yang berada di kawasan industri di Jalur Pantura&nbsp;Provinsi Jawa Barat. Sehingga akses yang dapat dilakukan untuk kepentingan akademik baik pembelajaran di sekolah maupun di luar sekolah (Dunia Usaha / Dunia Industri ) dapat dilakukan dengan baik.</p>
<p><b>Potensi Unggulan</b></p>
<p>Potensi unggulan yang ada di SMK Negeri 1 Cimahi diantaranya adalah</p>
<ol>
<li><b>Siswa</b>&nbsp;: Nilai masuk siswa yang cukup tinggi merupakan potensi yang lebih mudah dalam mengembangan karena kemampuan yang dimiliki siswa dapat dengan mudah digunakan dalam penyerapan pengetahuan dan keterampilan yang harus mereka terima di sekolah.</li>
<li><b>Program Keahlian</b>&nbsp;: Program Keahlian yang ada di SMK Negeri 1 Cimahi ini hampir semuanya merupakan satu-satunya program keahlian yang ada di Indonesia, kecuali untuk program ICT ada untuk yang 3 tahun tapi untuk yang 4 tahun di sekolah ini merupakan satu-satunya. Semua program keahlian perintisnya dari SMK Negeri 1 Cimahi. Hal ini merupakan suatu potensi unggulan karena dengan mudah siswa yang lulus terserap oleh industri hal ini telah berlangsung sejak berdirinya STM Pembangunan Bandung yang sekarang menjadi SMK Negeri 1 Cimahi.</li>
<li><b>Kegiatan Pelatihan</b>&nbsp;: Adanya berbagai kegiatan pelatihan dari luar yang sering dilakukan di sekolah ini memudahkan sekolah berhubungan dengan dunia usaha dan dunia industri juga dalam mengadopsi kemajuan teknologi yang saat ini berkembang dengan pesat.</li>
<li><b>English Testing Centre</b>&nbsp;: Sebagai pusat pelaksanaan Test TOEIC (Test Of English for International Communication) SMK Negeri 1 Cimahi merupakan pusat dalam kegiatan pembelajaran Bahasa Inggris untuk daerah Bandung dan Cimahi.</li>
<li><b>Kegiatan Ekstra Kurikuler</b>&nbsp;: Berbagai jenis kegiatan ekstra kurikuler yang dilaksanakan disekolah ini telah menghasilkan beberapa prestasi baik ditingkat regional maupun di Tingkat nasional.</li>
<li><b>Sertifikasi</b>&nbsp;: Adanya program sertifikasi untuk Teknik Informatika (Diploma 1 Teknik Komputer Jaringan) kerjasama dengan SEAMOLEC-ITB dan Diploma 1 Teknik Mekatronika&nbsp;kerjasama dengan&nbsp;POLMAN BANDUNG (Program Seamless Education – Pendidikan Vokasi Berkelanjutan) juga merupakan suatu unggulan bagi SMKN 1 Cimahi.</li>
</ol>

ekskul.php

<p>Kepemimpinan :</p>
<ol>
    <li>Praja Muda Karana (PRAMUKA)</li>
    <li>Pasukan Pengibar Bendera (PASKIBRA)</li>
    <li>Palang Merah Remaja</li>
    <li>Pecinta Alam</li>
    <li>Keamanan Sekolah</li>
</ol>

<p>Bahasa :</p>
<ol>
    <li>Japanese Club</li>
    <li>English Club</li>
</ol>

<p>Seni :</p>
<ol>
    <li>Lingkung Seni Sunda (LISDA)</li>
    <li>Kabaret</li>
    <li>Modern Dance</li>
    <li>Cheerleader</li>
    <li>Angklung</li>
    <li>Vocal Group</li>
</ol>

<p>Olah Raga :</p>
<ol>
    <li>Basket Ball</li>
    <li>Futsal</li>
    <li>Taekwondo</li>
    <li>Twenty Offroad</li>
    <li>Pencak Silat</li>
    <li>Base Ball</li>
</ol>

berita.php

<?php
    include "koneksi.php";

    $databerita=mysqli_query($varkoneksi,"select * from tbl_berita order by idberita desc");

    echo "<h2>Berita terbaru</h2>";

    while($user_data = mysqli_fetch_array($databerita)) 
    {         
        echo "<h2>".$user_data['judul']."</h2>";
        echo "<p>Penulis : ".$user_data['penulis']."</p>";  
        echo "<p>".$user_data['tanggal']."</p>";  
        echo "<p>".$user_data['isiberita']."</p>"; 
        echo "<p><a href=''>Baca selengkapnya ... </a></p>";
        echo "<p><hr></p>";
    }
?>

login.php

<h2>Halaman Login</h2>
<form method="POST" action="halaman/loginaksi.php">
    <table align="center">
        <tr>
            <td>Username</td>
            <td><input type="text" name="pengguna" placeholder="Masukan Username"></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input type="password" name="katakunci" placeholder="Masukan Password"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" name="tombollogin" value="LOGIN"></td>
        </tr>
    </table>
</form>

loginaksi.php

<?php
    session_start();

    include "../koneksi.php";

    $namapengguna   = $_POST['pengguna'];
    $kuncipengguna  = $_POST['katakunci'];

    $ambildata  =mysqli_query($varkoneksi,"select * from tbl_pengguna where username='$namapengguna' and password='$kuncipengguna'");


    //cek data
    $cek=mysqli_num_rows($ambildata);

    if($cek>0){
        $_SESSION['username']=$namapengguna;
        $_SESSION['status']='login';
        header("location:../index.php?halaman=tambahberita");
    }

    else
    {
        //header("location:index.php?pesan=gagal");
        header("location:../index.php?halaman=home");
    }

?>

tambahberita.php

<?php
    //mulai session
    session_start();

    //cek status sudah login
    if($_SESSION['status']!="login")
    {
        header("location:index.php?halaman=login");
    }

    // koneksi ke database
    include "koneksi.php";

    // Fetch semua data user dari database
    $result = mysqli_query($varkoneksi, "SELECT * FROM tbl_pengguna ORDER BY idpengguna ASC");
?>



<h2>Halaman Tambah Berita</h2>
<a href="halaman/logout.php">LOGOUT</a>
<form method="POST" action="halaman/tambahberita_aksi.php">
    <table>
        <tr>
            <td width="100px">Judul Berita</td>
            <td width="400px"><input type="text" name="judul" placeholder="Masukan Judul Berita"></td>
        </tr>

        <tr>
            <td>Penulis</td>
            <td><input type="text" name="penulis" placeholder="Masukan Nama Penulis"></td>
        </tr>

        <tr>
            <td>Tanggal</td>
            <td><input type="date" name="tanggal"></td>
        </tr>

        <tr>
            <td>Isi Berita</td>
            <td>
                <textarea name="isiberita">
                        
                </textarea>
            </td>
        </tr>

        <tr>
            <td></td>
            <td><input type="submit" name="tomboltambah" value="Tambah Berita"></td>
        </tr>
    </table>
</form>

tambahberita_aksi.php

<?php
    session_start();

    include "../koneksi.php";

    $judul      = $_POST['judul'];
    $penulis    = $_POST['penulis'];
    $tanggal    = $_POST['tanggal'];
    $isiberita  = $_POST['isiberita'];
   
    $tambahberita  =mysqli_query($varkoneksi,"insert into tbl_berita (judul,penulis,tanggal,isiberita) values ('$judul','$penulis','$tanggal','$isiberita')");

    header("location:../index.php?halaman=berita");
?>

logout.php

<?php
    //mulai session
    session_start();


    //hapus session
    session_destroy();

    //alihkan ke halaman login
    header("location:../index.php?halaman=berita");
?>

Sehingga hasilnya akan jadi seperti berikut ini :

Catatan : Untuk nama file, folder, gambar, warna, artikel dan sebagainya silahkan menyesuaikan dengan selera masing-masing.