Featured Post

Recommended

Cara Membuat Website Statis Sederhana Dengan HTML dan CSS

Pada artikel kali ini, saya akan membagikan Cara Membuat Website Sederhana dengan HTML dan CSS . Sebelumnya, apa sih website statis? apa bed...

Cara Membuat CRUD Native PHP dengan Mysqli

Cara Membuat CRUD Native PHP dengan Mysqli

Pada kesempatan kali ini saya akan membagikan Cara Membuat CRUD Native PHP dengan MySQLi. Di artikel sebelumnya saya sudah membahas mengenai Cara Membuat Website Statis Sederhana Dengan HTML dan CSS


MySQLi extension biasa dikenal dengan pengembangan MySQL (MySQL improved extension). Extension ini dikembangkan supaya pengembang aplikasi yang ingin menggunakan MySQL dapat menggunakan fitur barunya secara penuh. Ekstensi MySQLi ini kurang lebih sama dengan mysql, cara penggunaan argumen dan pemanggilan fungsi nya hampir sama, hanya menambahkan akhiran i. Contoh nya mysqli_query, mysqli_fetch_object dan sebagainya.


Cara Membuat CRUD Native PHP dengan Mysqli

Pada artikel ini, penulisan CRUD yang dibagikan menggunakan Style Object Oriented. Sebagai contoh disini saya membuat tabel dengan nama TbBlog, Anda bebas menamai table tersebut. Berikut di bawah ini adalah struktur nya :

+-------------+-------------+------+-----+---------+----------------+
| Field       | Type        | Null | Key | Default | Extra          |
+-------------+-------------+------+-----+---------+----------------+
| id          | int(11)     | NO   | PRI | NULL    | auto_increment |
| id_kategori | int(11)     | NO   |     | NULL    |                |
| tanggal     | date        | NO   |     | NULL    |                |
| judul       | varchar(50) | NO   |     | NULL    |                |
| isi         | text        | NO   |     | NULL    |                |
| status      | int(11)     | NO   |     | 0       |                |
+-------------+-------------+------+-----+---------+----------------+
6 rows in set (0,00 sec)

Langkah selanjutnya, masuk ke folder htdocs dan buat sebuah folder baru dengan nama sesuka kalian, di dalam folder baru tersebut buat file php dengan nama koneksi.php, buka file tersebut dengan text editor, disini saya menggunakan VS Code sebagai text editor. Masukan kode di bawah ini ke dalam file koneksi.php kemudian save.
<?php
$koneksi = new mysqli('localhost', 'root', 'password','nama database');
if ($koneksi->connect_error) {
    die("Koneksi Gagal: " . $koneksi->connect_error);
} 
?>

Kode di atas berfungsi agar dapat terkoneksi dengan database dan table yang telah dibuat sebelumnya.

Script CRUD PHP

Setelah membuat file koneksi ke database, langkah selanjutnya adalah membuat file index.php sebagai halaman untuk menampilkan list data dari table TbBlog tadi. Silahkan copy dan paste pada file index.php yang telah dibuat ya, berikut ini kode nya : 

<?php
require_once('koneksi.php');
 
$query = "SELECT * FROM TbBlog";
$urlcrud = "create.php";
?>
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
  <div class="w-75 p-3" >
  <div class="container">
<div class="row">
     <div class="col-lg-12">
     <a href="<?= $urlcrud.'' ?>" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-plus"></span> Tambah</a>
     <table class="table table-hover table-bordered" style="margin-top: 10px">
        <tr class="success">
            <th width="50px">No</th>
            <th>id kategori</th>
            <th>Tanggal</th>
            <th>Judul</th>
            <th>Isi</th>
            <th>Status</th>
            <th style="text-align: center;">Actions</th>
        </tr>
     <?php
     if($data=mysqli_query($koneksi,$query)){
        $a=1;
        while($obj=mysqli_fetch_object($data)){
     ?>
        <tr>
            <td><?= $a ?></td>
            <td><?= $obj->id_kategori ?></td>
            <td><?= $obj->tanggal ?></td>
            <td><?= $obj->judul ?></td>
            <td><?= $obj->isi ?></td>
            <td><?= $obj->status ?></td>
            <td style="text-align: center;">
                <a onclick="return confirm('Apakah yakin data akan di hapus?')" href="<?= $urlcrud.'hapus&id='.$obj->id ?>" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true">Hapus</span></a>
                <a href="<?= $urlcrud.'edit&id='.$obj->id ?>" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-edit" aria-hidden="true">Edit</span></a>
            </td>
        </tr>
        <?php
        $a++;
        }
     }
     ?>
     </table>
  </div>
</div>
    </div>
    </div>

Langkah berikut nya adalah membuat file create.php, silahkan buat file baru. create.php ini supaya dapat menampilkan form create. Proses insert nya menggunakan file ini, bisa dilihat pada saat method nya POST maka akan meg-eksekusi proses insert, disini juga menggunakan try catch untuk proses insert data nya. Berikut code untuk file create.php nya : 


<?php
require_once('koneksi.php');
if($_POST){
    try {
       $sql = "INSERT INTO TbBlog (id_kategori,tanggal,judul,isi,status) VALUES ('".$_POST['id_kategori']."','".$_POST['tanggal']."','".$_POST['judul']."','".$_POST['isi']."','".$_POST['status']."')";
       if(!$koneksi->query($sql)){
          echo $koneksi->error;
          die();
        }
    } catch (Exception $e) {
      echo $e;
      die();
    }
    echo "<script>
         alert('Data berhasil di simpan');
         window.location.href='index.php?page=crud/index';
         </script>";
}
?>
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
  <div class="container">
<div class="row">
     <div class="col-lg-6">
         <h2> Tambah Data Baru</h2>
         <form action="" method="POST">
             <div class="form-group">
                 <label>Kategori</label>
                 <input type="text" value="" class="form-control" name="id_kategori">
             </div>
             <div class="form-group">
                 <label>Tanggal</label>
                 <input type="text" value="" class="form-control" name="tanggal">
             </div>
             <div class="form-group">
                 <label>Judul</label>
                 <input type="text" value="" class="form-control" name="judul">
             </div>
             <div class="form-group">
                 <label>Isi</label>
                 <input type="text" value="" class="form-control" name="isi">
             </div>
             <div class="form-group">
                 <label>Status</label>
                 <input type="text" value="" class="form-control" name="status">
             </div>
             <br>
             <input type="submit" class="btn btn-primary btn-sm" name="create" value="Create">
         </form>
      </div>
</div>
</div>

Berikut ini adalah tampilan pada halaman index nya :


Halaman Create :


Pop up berhasil membuat data baru :


Pop up untuk menghapus data :


Sekian artikel dari saya mengenai Cara Membuat CRUD Native PHP dengan MySQLi, apabila ada pertanyaan silahkan bertanya pada kolom komentar di bawah :)
Cara Membuat Website Statis Sederhana Dengan HTML dan CSS

Cara Membuat Website Statis Sederhana Dengan HTML dan CSS

Pada artikel kali ini, saya akan membagikan Cara Membuat Website Sederhana dengan HTML dan CSS. Sebelumnya, apa sih website statis? apa bedanya dengan website dinamis?


Sebelum meranjak ke cara pembuatan website statis, terlebih dahulu akan saya jelaskan mengenai website statis dan apa perbedaan antara website statis dengan website dinamis.


Website Statis (Static Website) adalah sebuah website yang kontennya statis / tidak berubah-ubah. Jika file di upload pada hosting, kita tidak dapat mengubahnya kecuali dengan cara manual, yaitu langsung mengubah isi file html maupun css nya. 


Sedangkan Website Dinamis (Dinamic Website) adalah jenis halaman web yang disusun oleh konten dan layout yang kaya akan informasi didalamnya. Dinamakan Website Dinamis karena konten nya dapat berubah-ubah, dengan kata lain konten dapat kita ubah melalui halaman dashboard. Website Dinamis seperti ini sangat cocok sekali untuk Website E-commerce yang biasanya harus update konten secara berkala.


Kelebihan Website Statis

  • Dapat dikerjakan oleh pemula, dalam artian dengan pengetahuan dasar, kita dapat membuat Website Statis ini, dan cocok sekali jika ingin mengasah kemampuan dengan praktek secara berkala.
  • Dapat dilihat langsung dengan web browser, tanpa membutuhkan aplikasi server.
  • Lebih mudah untuk Web Development menggunakan bahasa HTML.

Kekurangan Website Statis

  • Konten nya statis tidak berubah-ubah
  • Terbatas dalam interaksi dengan client
  • Tidak menggunakan database
  • Tidak menggunakan bahasa pemrograman PHP di server

Mengenal Struktur Dasar dari HTML

Secara umum, struktur dasar dari suatu dokumen HTML adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
    <title>Membuat Web dengan HTML dan CSS - Pemuda IT</title>
</head>
<body>
    <!--Elemen yang ditampilkan di halaman browser -->
</body>
</html>

Pada HTML 5 setiap file dokumen HTML harus diawali dengan sintak <!DOCTYPE html>. Sintak tersebut memiliki fungsi untuk memberitahu kepada browser bahwa dokumen HTML yang dibuat menggunakan HTML 5. Selain itu, juga memiliki fungsi membantu browser untuk menampilkan setiap elemen HTML dengan baik karena menggunakan versi HTML terbaru. Untuk mengakhiri menggunakan tag penutup </html>.

Setiap tag di HTML di desain memiliki pasangan, ibarat ada pembuka dan ada penutup nya. Tetapi, beberapa tag tidak mengharuskan kita membuat penutup, seperti <br> (untuk membuat baris baru) dan <hr> (untuk membuat garis horizontal) dan lainnya.

Tag selanjutnya adalah tag <head> yang berfungsi sebagai heading dari dokumen html yang kita buat. Pada bagian <head> kita bisa membuat judul dokumen, inisialisasi css, deskripsi dan meta tag lainnya.

Bagian utama dalam struktur dokumen html adalah bagian <body> karena di bagian ini berkaitan dengan elemen yang tampil dan di lihat oleh pengguna, kita akan banyak membuat kode-kode html di dalam body.

Membuat Layout Website

Layout merupakan tata letak dari setiap komponen elemen di dalam sebuah website. Layout ini memiliki fungsi untuk memetakan bagian-bagian dalam halaman website. Dengan desain layout yang baik, tentu saja akan memberikan kenyamanan kepada pengunjung website.

Pada umumnya, dalam sebuah website memiliki 4 bagian layout, yaitu :
  • Header : Berisi judul website
  • Navigasi : Menu navigasi, untuk memudahkan pengunjung menuju halaman-halaman tertentu
  • Konten : Bagian utama yang menjadi sasaran informasi yang ingin disampaikan ke pengunjung, atau biasa disebut body
  • Footer : Bagian paling bawah dari sebuah website, biasanya berisi informasi tambahan seperti copyright atau informasi dari kepemilikan sebuah website

 

Cara Membuat Website Statis Sederhana Dengan HTML Dan CSS

Sebelum memulai membuat website statis ini, kalian perlu sebuah text editor seperti VS Code, Sublime, Notepad++ dan lain-lain. Pada contoh ini saya menggunakan VS Code sebagai text editor.

Pertama buat sebuah folder baru, lalu buatlah sebuah file pada text editor kemudian beri nama index.html seperti pada gambar di bawah ini.


Setelah membuat file index.html, kemudian copy code di bawah dan pastekan pada text editor, kemudian save.

<!DOCTYPE html>
<html>
<head>
    <title>Beranda</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <div class="container">
       <header>
           <div class="logo">
               Belajar Membuat Website Statis
           </div>
       </header>
       <nav>
            <ul>
                <li><a href="index.html">Beranda</a></li>
                <li><a href="kontak-saya.html">Kontak Saya</a></li>
                <li><a href="tentang-saya.html">Tentang Saya</a></li>
            </ul>
        </nav>
       <article>
           <div class="konten">
            <a href="konten1.html"><img src="gambar/image1.png" ></a>
            <div class="judul">
                <a href="konten1.html">Belajar HTML</a>
            </div>
           <p>Hypertext Markup Language adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets dan bahasa scripting seperti JavaScript dan VBScript.</p>
           </div>
           <div class="konten">
            <a href="konten2.html"><img src="gambar/image2.png" ></a>
            <div class="judul">
                <a href="konten2.html">Belajar CSS</a>
            </div>
        
           <p>Cascading Style Sheet merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.</p>
           </div>
           <div class="konten">
            <a href="konten3.html"><img src="gambar/image3.png" ></a>
            <div class="judul">
                <a href="konten3.html">Belajar PHP</a>
            </div>
           <p>Hypertext Preprocessor atau hanya PHP saja, adalah bahasa skrip dengan fungsi umum yang terutama digunakan untuk pengembangan web. Bahasa ini awalnya dibuat oleh seorang pemrogram Denmark-Kanada Rasmus Lerdorf pada tahun 1994. Implementasi referensi PHP sekarang diproduksi oleh The PHP Group.</p>
           </div>
           <div class="konten">
            <a href="konten4.html"><img src="gambar/image4.png" ></a>
            <div class="judul">
                <a href="konten4.html">Belajar C++</a>
            </div>
           <p>C++ adalah bahasa pemrograman komputer yang dibuat oleh Bjarne Stroustrup, yang merupakan perkembangan dari bahasa C dikembangkan di Bell Labs. Pada awal tahun 1970-an, bahasa itu merupakan peningkatan dari bahasa sebelumnya, yaitu B.</p>
           </div>
      </article>
  
       <footer>
            Copyright 2022 website-saya.com
       </footer>
    </div>
</body>
</html>

Jika kita buka file index.html pada web browser, maka tampilan nya akan seperti berikut :


Agar tampilan nya menjadi lebih menarik, kita membutuhkan CSS. Perhatikan di dalam tag <head> .... </head>, terdapat sintak seperti ini :

<link href="style.css" rel="stylesheet" type="text/css"></link>

Fungsi dari sintak tersebut untuk memanggil file css yang dibuat terpisah.

Selanjutnya, buat file baru di folder yang sama dengan nama style.css, dan masukkan kode di bawah ini :

body{
    font-family: Arial, Helvetica, sans-serif;
    background: #e6e6e6;
    padding: 0;
    margin:0;
    
}

.container{
    width: 65%;
    height: auto;
    background: white;
    margin:auto;
    margin-top: 5px;
    padding-bottom: 5px;
}
.logo {
    font-size: xx-large;
    padding: 30px 0 30px 10px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1a75ff;
    border: 1px solid gainsboro;
}

nav li {
    float: left;
}

nav li a{
    display: inline-block;
    color:#ffffff;
    text-align: center;
    padding: 14px 15px;
    text-decoration: none;
}

nav li a:hover {
    opacity:0.9;
    background-color: #3385ff;
}

article {
    width: 98.8%;
    height: auto;
    border-radius: 3px;
    margin: 5px 5px 5px 5px;
    border: 1px solid gainsboro;
    clear: both;
}

article p {
    padding: 5px 6px 5px 5px;
    line-height: 1.5;  
}
article .konten {
    width: 23.5%;
    height: auto;
    margin: 5px 5px 5px 5px;
    border-radius: 3px;
    border: 1px solid gainsboro;
    float: left;
}

article .isi {
    width: 98.5%;
    height: auto;
    margin: 5px 5px 5px 5px;
    border-radius: 3px;
    border: 1px solid gainsboro;
    float: left;
}
article .isi .judul {
    font-size: xx-large;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-top: 10px;
}
article .isi p {
    margin-top: 0;
}
article .isi img {
    float: left;
    margin: 5px 5px 5px 5px;
}

article .konten img {
    width: 95.8%;
    height: 150px;
    margin: 5px 5px 5px 5px;

}
article .konten:hover {
    opacity:0.9;

}
article .konten .judul a {
    margin-left: 5px;
    text-decoration: none;
    font-size:x-large;
    color:#020101;
}

article .konten a:hover {
    opacity:0.9;
}

footer {
    clear: both;
    width: 98.8%;
    height: auto;
    text-align: center;
    margin: 5px 5px 5px 5px;
    border-radius: 3px;
    border-bottom: 1px solid gainsboro;
    padding-top: 15px;
    padding-bottom: 15px;  
}

Hasilnya akan seperti ini :


Demikianlah artikel mengenai Cara Membuat Website Statis Sederhana dengan HTML dan CSS, apabila ada kesalahan dalam penulisan, mohon dimaklumi. Jika ada pertanyaan, silahkan bertanya pada kolom komentar di bawah..