Gerbang Logika (Wajib dipahami sebelum belajar pemrograman)

Budi adalah seorang yang cerdas dan rajin namun pelupa. pada suatu hari, Budi berencana untuk melamar Wati. Singkat cerita, orangtua Wati bersedia menikahkan Wati dengan Budi dengan syarat :

  1. Budi harus sudah bekerja
  2. Budi membawa mas kawin sekurang-kurangnya emas 5 Gram
  3. Menunggu Wati lulus S2 sekitar 2 tahun lagi

Menurut orangtua Wati, syarat diatas adalah syarat mutlak dan harus dipenuhi. oleh karena itu, Budi wajib menyanggupi semua syarat tersebut. 1 Tahun berlalu, Budi kini sudah bekerja dan dia sudah mengantongi mas kawin emas sebanyak 100 Gram. Dengan sangat berani dan percaya diri, akhirnya budi datang kembali ke orangtua Wati. Tahukah anda bagaimana kelanjutannya? Apakah orangtua Wati menerima Budi?

Continue reading “Gerbang Logika (Wajib dipahami sebelum belajar pemrograman)”

JavaScript Input Output

Artikel ini merupakan salah satu artikel dari series Pembelajaran Javascript Fundamental. Pada kali ini, kita akan belajar bagaimana cara menampilkan output dan menerima input pada javaScript. Pada umumnya, javascript bisa menerima semua inputan dari berbagai elemen form HTML namun untuk saat ini, materi kita belum sampai kesana. jadi saat ini kita akan menggunakan script prompt() sebagai inputan dari javascript.

Continue reading “JavaScript Input Output”

Pengenalan javascript bagian 2

Artikel ini merupakan artikel lanjutan dari series Pembelajaran Fundamental Javascript. Kali ini kita akan membahas bagaimana menyisipkan dan menulis kode javascript. seperti halnya CSS, javascript bisa kita tulis melalui 3 cara :

  1. event tertentu pada elemen html seperti onlick, onchange, onmouseover, onmouseout, onkeydown, onload, dll
  2. internal javascript disisipkan pada tag head atau didalam body, diawal atau diakhir document
  3. external javascript, Javascript disisipkan pada file terpisah dengan file html

Continue reading “Pengenalan javascript bagian 2”

Backup Soal dan jawaban LKS Nasional Webdesign 2017

Hallo, selamat siang kawan-kawan semua, kali ini saya akan membagikan soal dan jawaban para peserta LKS Nasional bidang webdesign. tadinya saya mau coba upload semuanya, namun ternyata filenya besar sekali jadi saya memutuskan untuk mengupload hasil dari juara 1 sampai juara 3 saja. sebelum saya bagikan link download filenya, terlabih dahulu saya tulis kembali rekapan juara LKS Nasional bidang lomba webdesign. berikut adalah nama dan asal sekolah siswa/i berprestasi dibidang lomba Webdesign.

Continue reading “Backup Soal dan jawaban LKS Nasional Webdesign 2017”

Source Code CMS Laravel Multilanguage

Pada kesempatan kali ini, saya akan mencoba membagikan source code contoh aplikasi laravel multibahasa. pekerjaan saya yang saat ini sudah tidak dipake lagi oleh website aslinya. mudah-mudahan bermanfaat bagi pembelajar sekalian. btw ini saya buat sewaktu belajar Laravel (langsung ke 5.x), jadi kode masih berantakan dan tidak rapih. meski sebetulnya sampe skarang pun masih berusaha untuk lebih rapih dan clean.

Teknologi

Theme : custom and  developed by Sandy Firmansyah

Framework : Laravel versi 5.2

Admin theme : https://startbootstrap.com/template-overviews/sb-admin/

Author : Nugraha

demo online : http://cms.mangcoding.com/

url admin : http://cms.mangcoding.com/admin

preview dashboard depan :

langsung saja silakan menuju link dibawah ini :
https://goo.gl/cdlqri



instalasi

  1. git clone atau download source dari link diatas
  2. copykan ke folder htdocs atau /var/www/ anda
  3. setting env di file .env sesuaikan dengan databases dan user local anda
  4. jalankan melalui console :
    – composer update
    – php artisan migrate –seed atau php artisan migrate:refresh –seed
  5. jalankan dengan php artisan serve atau langsung buka : localhost/namaFolder/public
  6. jika anda ingin import manual databases download disini
  7. jika membutuhkan databases regional download disini
  8. Selebihnya silakan kirim komentar di kolom dibawah ini. sebelumnya saya garis bawahi mohon baca agreement dibawah ini terlebih dahulu sebelum download
  9. untuk url admin localhost/namaFolder/public/admin atau localhost:8000/admin

Agreement (PENTING UNTUK DIBACA)

  1. File diatas running di laptop saya, klo di anda tidak jalan bukan salah saya.
  2. semua script diatas ada beberapa yang memang tidak jalan, seperti contact us ke email, registrasi ke email, dll. dan mungkin ada beberapa fungsi yang memang saya hilangkan.
  3. jika ada pertanyaan saya tidak berkewajiban memberikan jawaban secara langsung dan spontan. jadi bersabarlah
  4. source diatas silakan digunakan untuk keperluan pendidikan, tapi jika ditujukan untuk komersial saya harap anda berkenan untuk menyantumkan copyright ke blog saya. atau boleh juga dengan donasi seikhlasnya sesuai dengan kesepakatan kedua belah pihak. feel free to contact Me 
  5. khusus untuk kepentingan komersial, saya akan bertanggung jawab sampai aplikasi ini online dengan normal, namun dengan catatan *sesuai dengan kesepakatan terlebih dahulu.

Studi kasus pembuatan facebook registration page

Pada materi sebelumnya, kita sudah belajar mengenai bagaimana cara pembuatan style, table, form dan lain-lain. kali ini, untuk mengasah skill dan mengingat kembali materi yang sudah kita pelajari sebelumnya maka kita akan membuat facebook registration page, demonya bisa anda lihat disini  atau melalui url https://mangcoding.github.io/fb.

Dengan adanya tutorial ini, mudah-mudahan memberikan gambaran proses pembuatan layout yang terstuktur dan penyisipan style yang lebih tepat kedalam elemen yang telah kita buat. langsung saja simak dan ikuti tutorial dibawah ini

1. Menentukan Elemen layout

seperti halnya web-web pada umumnya, halaman web selalu terdiri dari header, content dan footer. sedangkan untuk navigasi, bisa kita sisipkan di bagian header, content atau bahkan footer. di beberapa website ada juga yang menyediakan sidebar untuk navigasi dan banner. Untuk membuat halaman registrasi seperti faceboo, navigasi menu diletakkan dibagian footer. secara garis besar layoutnya bisa kita gambarkan seperti dibawah ini.

2. Membuat Elemen sesuai dengan layout

Perhatikan gambar sebelumnya, tiap elemen HTML kita anggap sebagai sebuah kotak yang melingkar. lalu kita isi kotak itu dengan elemen-elemen yang kita butuhkan. dalam satu kotak besar terdapat sebuag kotak lain yang mungkin didalamnya ada kotak lagi yang lebih kecil.

dengan melihat layout diatas, kita akan buat elemen HTML sesuai dengan racangan yang telah kita buat.

Perhatikan rancangan elemen diatas. pada tiap elemen baik itu header, content dan footer kita sisipkan class container. class container disini berfungsi agar content yang kita buat dari atas ke bawah sejajar. Perhatikan gambar berikut ini.

Perlu diingat, kita bebas menulis nama class sesuai yang kita mau dan tentu saja masalah sejajar/simetris dari atas-kebawah tergantung dari layout yang kita buat. Untuk kasus kali ini kita akan buat sejajar biar lebih rapih dan elegan.

3. Membuat Header

Setelah memahami pembahasan diatas, mari kita buat rancangan header sesuai dengan facebook aslinya. kali ini, kita akan membuat logo facebook di sebelah kiri dengan membuat class leftContent dan form login disebalah kanan dengan membuat class rightContent (perhatikan kembali gambar acuan/sketsa yang kita buat diatas).

Untuk pembuatan logo, kita akan cukupkan dengan membuat heading, sedangkan untuk form login, kita akan menggunakan table agar layouting lebih mudah. (Materi layouting sesungguhnya akan kita bahas pada materi berikutnya).

dan untuk CSS nya akan kita buat sebagai berikut :

lengkapnya sebagai berikut :

Bagaimana kawan-kawan? Menarik bukan?
Saya harap jika ada pertanyaan seputar materi yang ada di artikel ini langsung tanyakan di kolom komentar, atau melalui facebook page saya di halaman ini.

demikian tutorial studi kasus pembuatan registration facebook bagian 1. untuk lanjutannya, akan kita bahas pada artikel selanjutnya.

keep Learning ^_^
Semangat