Web Sekolah Sederhana dengan PHP dan MySql

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

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

tbl_pengguna

tbl_berita

  1. Buat folder di dalam htdocs dengan nama websekolah
  2. 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 "<h1>Maaf halaman yang anda tuju tidak ada</h1>";
                                    break;
                            }
                        }
                        else{
                            include "halaman/home.php";
                        }
                    ?>
                </div>

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

            <div class="kaki">  
                <?php 
                    include "footer.php"
                ?>
            </div>
        </div>
    </body>
</html>
  1. 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>
  1. 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";
    }
?>
  1. Buat file style.css dengan sintak seperti berikut ini :
h1{
    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;
}
  1. 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

 

Baca Juga  Selector, Property dan Value Pada CSS

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>

 

Baca Juga  Tutorial Bootstrap #5 : Table Class Pada Bootstrap

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>

 

Baca Juga  Cara Install WordPress di Localhost dengan XAMPP

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

<h1>Halaman Login</h1>
<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");
?>



<h1>Halaman Tambah Berita</h1>
<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.

Add Comment

error: Ga bisa dicopy