Showing posts with label WEB. Show all posts
Showing posts with label WEB. Show all posts

Saturday, September 1, 2018

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.
Selengkapnya

Thursday, June 9, 2016

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

Thursday, March 31, 2016

Cara Mengatasi EditPlus yang Selalu menghasilkan File .BAK

File .bak memang kadang menggangu. File ini sering kita temui ketika selesai mengerjakan project dengan software EditPlus. Sobat DUASATU tau apa itu file .bak yang di hasilkan oleh EditPlus ini ?
File .bak yang dihasilkan dari software ini merupakan file backup. Bertujuan untuk berjaga-jaga apabila anda tidak sengaja menghapus salah satu file project anda, anda dapat mengembalikannya.
Jika sobat DUASATU merasa terganggu akan hal ini, sobat dapat menonaktifkan / disable tools ini.
Langsung saja ikuti langkah berikut :
  1. Buka aplikasi EditPlus.
  2. Klik Tools >> Preferences
  3. Lalu klik File.
  4. Setelah itu, hilangkan centang yang ada pada "Create backup file when saving". Lalu klik ok.
    Nah, sekarang sudah tau kan, bagaimana cara menghilangkan file yang dirasa menggangu ini..
    OK cukup sekian tutorial kali ini, maaf tidak begitu panjang karna waktu shalat Jum'at bentar lagi masuk..
    Terimakasih, jangan lupa Share dan tinggalkan Komentar.
Selengkapnya

Monday, March 21, 2016

Mengaktifkan MySQL dari Xampp dengan Command Promt




Hai sobat DUASATU, jadi ceritanya setelah instal laptop, saya beralih memakai Xampp dari Wamp. Kenapa ?? ya karna saya tidak bisa menjalankan CodeIgniter 3 dengan Wamp, entah kenapa sebabnya saya pun juga kurang paham, namun saran dari dosen sih pake Xampp aja.

Singkat cerita saya langsung Uninstall deh tu Wamp, dan Instal Xampp. Nah pas di matakuliah lain yang mewajibkan pembuatan database menggunakan CMD saya kebingungan. Pusing deh nyari tombol di Xampp Control Panel buat masuk ke SQL Console, tapi ya emang gak ada.

Setelah googling kesana-kesini akhirnya saya menemukan cara nya agan Aidi Joda. Memang caranya agak rumit dan tidak segampang dengan menggunakan Wamp yang hanya satu kali klik. Namun tutorial kali ini saya posting untuk sobat DUASATU yang memiliki kendala kurang lebih sama dengan yang saya alami.

Untuk itu silahkan simak langkah demi langkah berikut dengan seksama :

  1. Aktifkan terlebih dahulu Xampp-nya sampai Apache dan MySQL berwarna hijau.
  2. Lalu buka Command Promt. Bisa dengan menekan Win+R, lalu ketikkan perintah "CMD" tanpa kutip.
  3. Setelah CMD tampil, ketikkan perintah berikut "cd c:/xampp/mysql/bin" tanpa kutip lalu Enter.
  4. Selanjutnya ketikkan perintah berikut "mysql -u root -p" tanpa petik lalu Enter.
  5. Lalu tekan enter sekali lagi.
Baiklah sekarang sobat sudah dapat menggunakan sintak MySQL di sini. Sebagai contoh sobat dapat melihat nama database dengan mengetikkan perintah "show databases;"

Terimakasih Sobat DUASATU sudah berkunjung, semoga bermanfaat, dan jangan lupa bagikan...


 



Selengkapnya

Sunday, March 6, 2016

Menampilkan Template pada Code Igniter

Pada postingan kali ini saya akan memberikan sedikit tutorial untuk menampilkan template pada Code Igniter. Sebelumnya bagi sobat DUASATU yang belum tau apa itu Code Igniter (CI) silahkan baca artikel sebelumnya disini.

Jika sobat sudah tau apa itu CI tentunya sobat sudah memiliki CI itu sendiri. Pada tutorial kali ini selain CI sobat juga membutuhkan Xampp atau Wamp, lalu notepad++ atau Edit+ sebagai media editor, Fierfox atau sejenisnya sebagai media eksekusi, jangan lupa download juga template disini atau disini.

Jika semua peralatan sudah dipersiapkan, langsung saja kita mulai langkah kerjanya. Silahkan simak dengan seksama.

Langkah Kerja : 
  1. Rename CI yang sudah di extract didalam htdoc / www menjadi "ci_template"
  2. Didalam folder ci_template, tambahkan folder baru dengan nama "assets"

  3. Lalu letakkan hasil extract dari template yang sudah di download sebelumnya kedalam folder "assets". 
  4. Selanjutnya edit file welcome.php yang ada di application >> controllers seperti gambar dibawah :

  5. Lalu tambahkan folder baru pada application >> view dengan nama "home" 
  6. Ambil file index.php yang ada di folder "assets" pindahkan ke application >> view >> home. Kemudian rename menjadi template.php
  7. Agar file css yang melengkapi template tidak kacau, maka kita perlu mengedit bagian link rel css nya seperti berikut :

  8. Diatas dapat kita perhatikan bahwa "href=" mengarah kepada  file css yang ada di dalam folder assets >> css >> style. Ini bertujuan agar temlate yang kita tampilkan dari folder view >> home tetap membaca file css-nya.
  9. Untuk menjalankan, silahkan buka browser di laptop sobat, lalu ketikkan "http://localhost/ci_template" kurang lebih tampilan yang saya miliki seperti dibawah ini :
Saya rasa cukup sekian postingan kali ini, mudah-mudahan membantu, jika terdapat kesalahan atau kekeliruan, saya mohon kritik dan sarannya. Terimakasih ...
Selengkapnya

Download CodeIgniter


Hai sobat DUASATU, kali ini saya akan membahas sedikit tentang apa yang saya ketahui dengan Code Igniter.

Code Igniter (CI) merupakan salah satu framework php yang populer di indonesia. Code Igniter memudahkan para Developer untuk membuat aplikasi berbasis web. Dengan Code Igniter Developer dapat lebih cepat membuat aplikasi web dari pada harus membuat dan merancangnya dari awal. Code Igniter pertama kali dirilis pada tanggal 28 Februari 2006.

Untuk saat ini versi terbaru dari Code Igniter yaitu versi 3.0.4. Namun saya memiliki dua CI, yaitu versi 2.2.6 dan versi 3.0.4

Jika sobat berminat, sobat dapat mendownload via ziddu.com pada link yang berada dibawah artikel ini. setelah CI terdownload, silahkan ekstract kemudian copy kan hasil ekstract tadi ke folder "htdoc" (Xampp) atau folder "www" (Wamp).
Kemudian untuk memastikan kalau CI berhasil berjalan di komputer sobat, silahkan buka aplikasi browser, ketikkan"http://localhost/namaCI" Jika berhasil, maka akan tampil seperti gambar berikut :


Baiklah saya rasa cukup jelas, namun apabila terdapat kesalahan dalam postingan ini, mohon kritik dan sarannya. Terimakasih ...


CodeIgniter-2.2.6 (2.23 MB)

CodeIgniter-3.0.4 (2.42 MB)
Selengkapnya