Simpan dan Tampil Data Dengan Satu File [PHP-MySQL]

Berawal ketika saya akan melaksanakan Ujian Kompetensi di kampus yang mewajibkan membuat program sederhana dalam waktu 15 Menit dengan metode Close Book and Close Source. Setelah berselancar didunia maya, akhirnya saya menemukan cara yang tepat, mudah dan cepat yaitu hanya dengan menggunakan index.php. Saya akan menjelaskan langkah demi langkahnya.

Silahkan simak tutorial berikut ini dengan baik.

• Hidupkan XAMPP yang sudah terinstal di komputer kalian. (Saya menggunakan Xampp)
• Buatlah sebuah database dengan nama "db_latihan_php"
• Buatlah sebuah tabel dengan nama "t_mahasiswa" dengan ketentuan sebagai berikut:

• Buatlah sebuah folder bernama "LATIHAN-PHP" pada direktory C:\xampp\htdocs
• Buatlah sebuah file baru bernama "index.php" dan letakkan didalam folder tersebut.
• Berikut koding dan penjelasannya :

Koding untuk koneksi ke database & action ketika tombol simpan di klik

<?php
// --- DARI SINI KONEKSI KE DATABASE
$koneksi = mysqli_connect("localhost","root","","db_latihan_php");
// --- SAMPAI SINI

// --- DARI SINI AKSI UNTUK TOMBOL SIMPAN
    if (isset($_POST['tombol_simpan'])){
        $nobp = $_POST['nobp'];
        $nama = $_POST['nama'];
        $jurusan = $_POST['jurusan'];     
        
        $sql = "INSERT INTO t_mahasiswa VALUES('$nobp','$nama','$jurusan')";
        $simpan = mysqli_query($koneksi, $sql);                  
    }
?> 
<!-----SAMPAI SINI-->

Koding untuk desain form input data mahasiswa

<h3>Form Input Mahasiswa</h3>
    <form action="" method="post">
        <table>
            <tr>
                <td>No. BP</td>
                <td><input type="text" name="nobp"></td>
            </tr>
            <tr>
                <td>Nama</td>
                <td><input type="text" name="nama"></td>
            </tr>
            <tr>
                <td>Jurusan</td>
                <td>
                    <select name="jurusan">
                        <option>--PILIH--</option>
                        <option value="Sistem Informasi">Sistem Infomasi</option>
                        <option value="Sistem Komputer">Sistem Komputer</option>
                        <option value="Manajemen">Manajemen</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>&nbsp</td>
                <td>
                    <input type="submit" name="tombol_simpan" value="Simpan">
                    <input type="reset" name="tombol_bersihkan" value="Bersihkan">
                </td>
            </tr>
        </table>
    </form>
    <hr>

Koding untuk memanggil data dari database

<!-----DARI SINI QUERY UNTUK MENAMPILKAN DATA-->
    <?php
        $sql = "SELECT * FROM t_mahasiswa";
        $query = mysqli_query($koneksi, $sql);
    ?>
<!-----SAMPAI SINI-->

Koding untuk desain penampilan data

<!-----DARI SINI DESAIN UNTUK TAMPIL DATA-->
    <h3>Data Mahasiswa</h3>
    <table border="1" width="50%">
        <tr>
            <th>NO BP</th>
            <th>NAMA LENGKAP</th>
            <th>JURUSAN</th>
        </tr>
        <?php while ($data = mysqli_fetch_array($query)) { ?>
            <tr>
                <td align="center"><?php echo $data['nobp']; ?></td>
                <td align="center"><?php echo $data['nama']; ?></td>
                <td align="center"><?php echo $data['jurusan']; ?></td>
            </tr>
        <?php } ?>
    </table>
<!-----SAMPAI SINI-->

Berikut Adalah Koding Seluruhnya Setalah Disatukan:

<?php
// --- DARI SINI KONEKSI KE DATABASE
$koneksi = mysqli_connect("localhost","root","","db_latihan_php");
// --- SAMPAI SINI

// --- DARI SINI AKSI UNTUK TOMBOL SIMPAN
    if (isset($_POST['tombol_simpan'])){
        $nobp = $_POST['nobp'];
        $nama = $_POST['nama'];
        $jurusan = $_POST['jurusan'];     
        
        $sql = "INSERT INTO t_mahasiswa VALUES('$nobp','$nama','$jurusan')";
        $simpan = mysqli_query($koneksi, $sql);                  
    }
?> 
<!-----SAMPAI SINI-->

<!-----DARI SINI DESAIN UNTUK FORM INPUT DATA-->
    <h3>Form Input Mahasiswa</h3>
    <form action="" method="post">
        <table>
            <tr>
                <td>No. BP</td>
                <td><input type="text" name="nobp"></td>
            </tr>
            <tr>
                <td>Nama</td>
                <td><input type="text" name="nama"></td>
            </tr>
            <tr>
                <td>Jurusan</td>
                <td>
                    <select name="jurusan">
                        <option>--PILIH--</option>
                        <option value="Sistem Informasi">Sistem Infomasi</option>
                        <option value="Sistem Komputer">Sistem Komputer</option>
                        <option value="Manajemen">Manajemen</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>&nbsp</td>
                <td>
                    <input type="submit" name="tombol_simpan" value="Simpan">
                    <input type="reset" name="tombol_bersihkan" value="Bersihkan">
                </td>
            </tr>
        </table>
    </form>
    <hr>
<!-----SAMPAI SINI-->

<!-----DARI SINI QUERY UNTUK MENAMPILKAN DATA-->
    <?php
        $sql = "SELECT * FROM t_mahasiswa";
        $query = mysqli_query($koneksi, $sql);
    ?>
<!-----SAMPAI SINI-->

<!-----DARI SINI DESAIN UNTUK TAMPIL DATA-->
    <h3>Data Mahasiswa</h3>
    <table border="1" width="50%">
        <tr>
            <th>NO BP</th>
            <th>NAMA LENGKAP</th>
            <th>JURUSAN</th>
        </tr>
        <?php while ($data = mysqli_fetch_array($query)) { ?>
            <tr>
                <td align="center"><?php echo $data['nobp']; ?></td>
                <td align="center"><?php echo $data['nama']; ?></td>
                <td align="center"><?php echo $data['jurusan']; ?></td>
            </tr>
        <?php } ?>
    </table>
<!-----SAMPAI SINI-->

Jika ada yang kurang paham, jangan lupa tinggalkan komentar, semoga bermanfaat, Terimakasih.

• DOWNLOAD CODE

Selengkapnya

Membuat Nomor Otomatis Pada VB.Net dengan Koneksi Database Oracle

Hallo sobat DUASATU,,, setelah sekian lama akhirnya saya kembali memberikan postingan di blog ini. Kali ini saya akan memberikan sebuah tutorial tentang pemberian nomor otomatis pada VB.Net dengan koneksi darabase dari oracle berupa video.

Namun jika sobat DUASATU ingin men-download script ataupun project beserta database, sobat dapat menuju link berikut :

Project VB.Net = DISINI

Database = DISINI

Source Only = DISINI

Selengkapnya

Tutorial CRUD Sederhana pada CodeIgniter

<<Download>>

Selengkapnya

Cara Membuat Template Login dengan HTML + CSS

Template merupakan suatu hal yang familiar di bidang web. Banyak orang menggunakan template sebagai media latar belakang yang dapat mempercantik web mereka. Pada artikel kali ini saya akan mencoba membagikan ilmu tentang bagaimana cara membuat template login sendiri menggunakan kombinasi script HTML dan CSS.

Sekedar mengingatkan, script CSS tentu saja dapat digabung kedalam file HTML. Namun, untuk kerapian dari susunan script kebanyakan orang memisahkan script tersebut dan menghubungkannya dengan media sebuah link. Pada artikel kali ini saya akan menyelipkan script CSS kedalam file HTML dengan pemisah :

<style> disini script CSS-nya </style>

Langkah pertama
Ketikkan script HTML seperti dibawah ini :

<h1>Template Login By : duasatuberbagi.blogspot.com</h1>
<div class="stand">
<div class="outer-screen">
<div class="inner-screen">
<div class="form">
<input type="text" class="zocial-dribbble" placeholder="Username" />
<input type="text" placeholder="Password"/>
<input type="submit" value="Masuk" />
<a href="">Lupa Password?</a>
</div> 
</div> 
</div> 
</div>

Langkah Kedua
Setelah tag </div> yang bercetak tebal diatas ketikkan script CSS berikut :

<style>
body{
  margin: 0px;
  padding: 0px;
  background: #31b6f4;
}
h1{
  color: #fff;
  text-align: center;
  font-family: Arial;
  font-weight: normal;
  margin: 2em auto 0px;
}
.outer-screen{
  background: #13202c;
  width: 900px;
  height: 540px;
  margin: 50px auto;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  position: relative;
  padding-top: 35px;
}

.outer-screen:before{
  content: "";
  background: #3e4a53;
  border-radius: 50px;
  position: absolute;
  bottom: 20px;
  left: 0px;
  right: 0px;
  margin: auto;
  z-index: 9999;
  width: 50px;
  height: 50px;
}
.outer-screen:after{
  content: "";
  background: #ecf0f1;
  width: 900px;
  height: 88px;
  position: absolute;
  bottom: 0px;
  border-radius: 0px 0px 20px 20px;
  -moz-border-radius: 0px 0px 20px 20px;
  -webkit-border-radius: 0px 0px 20px 20px;
}

.stand{
  position: relative;  
}

.stand:before{
  content: "";
  position: absolute;
  bottom: -150px;
  border-bottom: 150px solid #bdc3c7;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  width: 200px;
  left: 0px;
  right: 0px;
  margin: auto;
}
.stand:after{
  content: "";
  position: absolute;
  width: 260px;
  left: 0px;
  right: 0px;
  margin: auto;
  border-bottom: 30px solid #bdc3c7;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  bottom: -180px;
  box-shadow: 0px 4px 0px #7e7e7e
}
.inner-screen{
  width: 800px;
  height: 340px;
  background: #31b6f4;
  margin: 0px auto;
  padding-top: 80px;
}
.form{
  width: 400px;
  height: 230px;
  background: #edeff1;
  margin: 0px auto;
  padding-top: 20px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
input[type="text"]{
  display: block;
  width: 309px;
  height: 35px;
  margin: 15px auto;
  background: #fff;
  border: 0px;
  padding: 5px;
  font-size: 16px;
   border: 2px solid #fff;
  transition: all 0.3s ease;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
input[type="text"]:focus{
  border: 2px solid #31b6f4
}
input[type="submit"]{
  display: block;
  background: #31b6f4;
  width: 314px;
  padding: 12px;
  cursor: pointer;
  color: #fff;
  border: 0px;
  margin: auto;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  font-size: 17px;
  transition: all 0.3s ease;
}
input[type="submit"]:hover{
  background: #09cca6
}
a{
  text-align: center;
  font-family: Arial;
  color: gray;
  display: block;
  margin: 15px auto;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 12px;
}
a:hover{
  color: #31b6f4;
}
::-webkit-input-placeholder {
   color: gray;
}
:-moz-placeholder { /* Firefox 18- */
   color: gray;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: gray;  
}
:-ms-input-placeholder {  
   color: gray;  
}
</style>

Langkah Ketiga

Setelah semua script anda ketik, sekarang saatnya anda menyimpan hasil ketikan tersebut dengan nama "login.html".

Silahkan jalankan file .html tersebut dengan browser. Maka hasilnya akan sama seperti gambar diatas.

Cukup sekian artikel saya tentang Cara Membuat Template Login dengan HTML + CSS.
Untuk kemajuan blog ini, please Subscribe and Share, Terimakasih.

Selengkapnya

Solusi Subtitle Film yg Tidak ditemukan Dalam Bahasa Indonesia

Sobat DUASATU bingung tidak menemukan subtitle Film dengan bahasa Indonesia ??? Jangan risau, karna salah satu teman saya sudah memberikan sebuah solusi jitu. Dan hari ini, akan saya share kepada sobat DUASATU sekalian.

Syarat mutlak yang harus sobat lengkapi yaitu koneksi internet, satu perangkat laptop, atau komputer. Jika sudah lengkap, saya akan menceritakan pengalaman saya.

Beberapa hari yang lalu saya berhasil mendownload sebuah film aksi yang belum keluar di bioskop melalui Layarkaca21.com , judulnya Arrowhead namun sayangnya, film ini tidak dilengkapi subtitle berbahasa indonesia. Sayapun bingung mencari subtitle di berbagai situs. Akhirnya pada situs ini saya menemukan subtitlenya, namun sangat disayangkan lagi subtitle yang ada hanya berbahasa Inggris dan bahasa Rusia. Setelah mendapatkan pencerahan dari teman saya ini, saya memutuskan untuk mendownload subtitile yang berbahasa Inggris tersebut, dan merubahnya ke dalam bahasa indonesia. Caranya bagaimana ?? Simak penjelasan berikut dengan seksama.

1. Download subtitle yang merupakan sebuah file berekstensi "srt".
2. Buka file tersebut dengan menggunakan notepad.
3. Lalu tekan CTRL+A untuk seleksi secara keseluruhan.
4. Tekan CTRL+C untuk mengkopi tulisan yang sudah diseleksi.
5. Buka situs ini 
6. Pastekan tulisan yang sudah dikopi tadi kedalam kolom Inggris
   
7. Maka sobat akan mendapatkan translate bahasa indonesianya pada kolom sebelah kanan.
8. Klik ikon seperti gambar dibawah untuk mengkopi tulisan secara keseluruhan.
   
9. Lalu pastekan ke notepad yang tadi sudah dibuka, sebelumnya hapus dulu tulisan yang berbahasa inggris.
10. Sejauh ini kita sudah berhasil mengubah subtitle tersebut kedalam bahasa Indonesia. Namun jika kita pakai ke dalam Film, hasilnya tidak akan sesuai.
11. langkah berikutnya, edit subtitle tersebut agar dapat dipakai pada film tersebut.
12. Tekan CTRL+H pada notepad yang berisi tulisan bahasa Indonesia.
    
13. Setelah tampil seperti gambar diatas, ketik "->" (strip dan tutup kurung siku) pada kolom Find what.
14. Pada kolom Replace with, ketik tulisan "-->" (double strip dan tutup kurung siku).
15. Klik Tombol Replace All.
16. Save
17. Finish.

Wah, panjang juga ya caranya.. Tapi ini lah kenyataan jika kita tidak pandai berbahasa inggris. Untuk sobat DUASATU yang membaca postingan ini, jangan pernah bosan untuk belajar bahasa Inggris, karna Bahasa internasional ini sangat bermanfaat.
Terimakasih, silahkan tinggalkan komentar dan share jika bermanfaat.

Thank's to: Benny Hariyanto

Selengkapnya