Hasil Projek Kalkulator Php & Javascript dengan Dreamweaver
Hasil Projek Kalkulator
Hasil Projek Kalkulator
Ini adalah : Hasil Projek kalkulator yang sudah kita buat seperti penampakan yang ada ini, yang mana kita ambil dari artikel sebelumnya yakni Membuat kalkulator php & javascript dengan dreamweaver, Adapun untuk pembahasan selanjutnya kita membuat kalkulator dan datanya dimasukan ke dalam database MySQL.
Adapun langkah berikutnya kita menghilangkan garis tepi, agar tidak terlihat seperti tampilan website pada umumnya, dengan cara kita masuk ke index.php kemudian pada table yakni <table width="100%" border="1"> yang terdapat pada border="1" diganti dengan "0", perhatikan gambar dibawah ini :
Anda juga dapat menengahkan tulisan dengan skrip sebagai berikut : <div align="center"> jangan lupa menutupnya dengan </div>, perhatikan gambar diatas, jika pada border sudah diganti "0" kemudian disimpan, maka tentu aktulnya garis tepi akan hilang seperti pada gambar dibawah ini :
Nampak garis tepi sudah hilang, jika sudah disimpan atas perubahan pada border table.
Catatan saat ini penulis tidak menghilangkan bordernya atau garis -garis pada table, tentu anda dapat melihat tampilannya saat ini melalui link pembahasan sebelumnya, tentu hal ini dilakukan agar mudah dalam kepemahaman bagi yang lainnya.
Adapun langkah selanjutnya kita menggunakan plugins pada Bootstrap silahkan download disitus resminya, saat ini penulis menggunakan Bootstrap 4.5.3, jika sudah kita akan menggunakan fasilitas atau fungsi-fungsi yang ada pada bootstrap, file yang dibutuhkan adalah : bootstrap.bundle.min.js, bootstrap.js
Jika ingin mendownload filenya disini, sudah disediakan dibawah ini :
| No | Nama File | Deskripsi | Download File |
| 1 | bootstrap.bundle.min.js | Bootstrap (Bundle.min.js)v4.6 | |
| 2 | bootstrap.css | Bootstrap (css) v4.6 | |
| 3 | bootstrap.min.css | Bootstrap (min.css) 5.0.0-beta3 | |
| 4 | bootstrap.min.js | Bootstrap (min.js) v4.5.3 | |
| 5 | bootstrap.js | Bootstrap (js) v4.5.3 | |
| 6 | jquery.min.js | Jquery (min.js) v3.5.1 | |
| 7 | jquery.js | Jquery (js) v3.5.1 |
Jika sudah mendownloadnya seperti biasa kita letakkan skrip untuk memanggilnya, penulisan tanpa folder :
<script src="bootstrap.js"></script> <script src="bootstrap.bundle.min.js"></script>
Catatan : Perhatikan tata letaknya, terkadang jika terbalik meletakkannya berakibat tidak berfungsi, Bootstrap.js lebih dahulu, namun jika ada jquery maka jquery.js lebih dahulu (letakkan diatas), seperti contoh dibawah ini :
<script src="jquery.js"></script>
<script src="jquery.min.js"></script> <script src="bootstrap.js"></script>
Kenapa harus menggunakan plugin
Kenapa harus menggunakan plugins pada Bootstrap sih ?, Sebenarnya kita membuat sendiripun bisa, mengingat hal ini selalu berulang skripnya, maka daripada mengetik ulang dan juga para sesepuh programmer sudah jauh-jauh hari memikirkan hal tersebut, maka cukuplah kita menggunakan bootstrap, jika anda ingin mempelajari bootstrap sangat mudah disebabkan open source, dalam artian anda dapat merubah, memodifikasi, memanipulasi dan mencabut serta memotongnya sesuai kebutuhan anda, pada prinsipnya skrip yang ada pada bootstrap adalah skrip yang selalu berulang-ulang digunakan sehingga dari pada kita mengetik ulang, maka kita gunakan saja bootstrap tersebut sekaligus menghargai para sesepuh yang sudah membuat dan menyusunya untuk fungsi-fungsi tertentu yang selalu dibutuhkan.
Jika anda sudah memahaminya silahkan untuk mengunjungi disini, fungsi apa yang cocok untuk projek website kalkulator kita ini : Membuat Tabbable Panes using List Group
Menggunakan tabbale panes
Dalam hal ini kita membutuhkan Tabbable Panes using List Group, karena berfungsi untuk mengganti file yang dipilih & di inginkan saat di klik, anda juga dapat mempelajarinya beberapa fungsi pada Bootstrap namun jangan dilupakan dasar HTML nya ya silahkan kunjungi disini :
3. Form-Jumbotron & Thumbnails
4. Membuat tombol pagination dan lain-lain
Jika sudah anda pahami silahkan kita melanjutkan pembahasan ini, dalam hal ini kita akan membuat atau memasang Tabbable Panes : perhatikan dibawah ini :
Copy skrip yang sudah diberikan pada artikel Tabbale Panes dengan mengklik Ctrl+C kemudian copykan kedalam Index.php yang ada skrip : <td><?php include "All_Files.php";?></td>, Catatan meletakkannya harus didalam <td> paste disini </td>, sedangkan skrip <?php include "All_Files.php";?> akan kita pindahkan sesuai pada tempat yang di inginkan.
Perhatikan skrip dibawah ini :
<script>
$('#list-tab a').on('click', function (e) { e.preventDefault() $(this).tab('show') })</script>
<div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a> <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a> <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Pesan</a> <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Atur</a> </div> </div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">Letak All.file.php (<?php include "All_Files.php";?>)</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">Ini Untuk artikel selanjutnya</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">Ini Untuk Artikel Selanjutnya</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">Ini Pun begitu</div>
</div>
</div>
</div>
Catatan Penting: Pembahasan diatas hanya sebagai contoh saja, hanya untuk menambah pengetahuan, ada baiknya kita menggunakan link yang sederhana, agar lebih mendalam pemahamannya, jika sewaktu-waktu ingin menggunakan plugin tidak susah memahaminya sampai kepada skripnya sekaligus.
Contoh kita mebuat link biasa:
Skripnya dibawah ini:
<ul> <li><a href="?bab=Halaman-Pertama">Halaman Utama</a></li> <li><a href="?bab=halaman-berikutnya">Hasil Projek Kalkulator</a></li> </ul>
Letakkanlah skrip tersebut pada Index.php pada ROW KETIGA PADA KOLOM PERTAMA, Saat ini kita tidak mengutamakan tampilan, namun mengutamakan memahami kinerja skrip, adapun untuk memperbagus tampilan itu akan seiring sejalan dengan kepemahaman anda secara automatis.
Adapun untuk <?php include "All_Files.php";?> tetap seperti biasa tiak berubah letaknya yakni pada ROW KETIGA. perhatikan gambar dibawah ini :
cara menengahkan tulisan pada kolom inputan
cara menengahkan tulisan yang ada pada kolom inputan
Catatan tambahan : adapun cara menengahkan tulisan yang ada pada kolom inputan, sehingga menjadi center posisinya, cukup anda menulis skrip dibawah ini :
<style>
input.angkaC {
text-align:center;
}
input.angkaL {
text-align:left;
}
input.angkaR {
text-align:right;
}
</style>
Skrip diatas adalah skrip CSS dan sudah merupakan atau dikelompokkan sebagai class, sehingga kita cukup memanggil classnya saja tanda titik(.) sudah menunjukkan class jadi untuk memanggil cukup menulis angkaC seperti dibawah ini :
input name="angka1" type="text" required="required" class="angkaC" id="angka1" placeholder="angka" title="tambahan" value="<?php echo $dataangka1;?>" size="4" maxlength="13">
sehingga tulisan pada kolom inputan menjadi center, silahkan untuk mengecek aktualisasinya pada table diatas.
Pembahasan ini cukup sampai disini, kita akan melanjutkan ketahapan berikutnya yakni : Membuat kalkulator php & javascript dengan database MySQL
Input Data Tanpa Refresh Dengan Database MYSQL
Perhatikan setiap warna yang diberikan, karena kata-kata itu akan saling berhubungan atau dikenal dengan INTEGRASI jika sudah jadi maka menjadi INTEGRITED, Para penggunanya menjadi INTEGRITER (Integrity), Kata setiap warna yang diberikan selalu berhubungan dengan skrip selanjutnya
Input Data Tanpa Refresh Dengan Radio button
Kita Melanjutkan dari Input data tanpa refresh dengan database MySQL I yang sudah kita bahas sebelumnya, maka kita melanjutkan pembahasan ini walaupun tidak jauh berbeda hanya perbedaan pada pilihan kelamin, yang sebelumnya menggunakan type input, sekarang menggunakan type Radio button atau Checkbox kita pilih salah satunya saja,
Input Data Tanpa Refresh Dengan Checkbox
Ini hanya penambahan saja dari Input data tanpa refresh dengan database MySQL dan Input data tanpa refresh dengan database MySQL II yang sudah kita bahas sebelumnya, yakni sebelumnya menggunakan type input, dan type Radio button maka sekarang menggunakan Checkbox. Seperti biasa membuat database, atau bisa juga menggunakan database yang sudah ada
Cookie Xflash
This website uses cookies. We use cookies to ensure that we give you the best experience on our website to personalise content, adverts and to analyse our traffic using Google Analytics. Read Xflash Privacy Policy and Cookie Policy and Terms & Conditions.
Situs web ini menggunakan cookie. Kami menggunakan cookie untuk memastikan bahwa kami memberikan pengalaman terbaik di situs kami untuk Anda dan untuk mempersonalisasi konten, iklan dan menganalisis lalu lintas menggunakan Google Analytics. Bacalah tentang : Kebijakan Privacy dan Kebijakan Cookie serta Syarat & Ketentuan Xflash.
Silahkan Anda dapat mengubah pengaturan cookie kapan saja, menghapus atau disable pada browser.
