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.

Bagaimana seorang guru harus bersikap? 

Masih seputar pendidikan dan sejuta problematika yg mengiringinya. Kali ini saya ingin curhat mengenai problematika remaja. Bicara soal moral, pendidikan, attitude dan sekolah memang tidak sesimpel yang dibayangkan. Dibuat Simple Yah simple, dibuat runyem malah tambah runyem. 

Sebelum saya curhat ke pokok permasalahan, alangkah baiknya saya perkenalkan diri terlebih dahulu. Saya adalah seorang guru, mengajar di sekolah ini baru 2-3 tahun. Saya pun alumni di sekolah ini. Jadi, sedikit banyaknya saya memahami kenakalan remaja sekarang seperti apa. Kejadian yg menimpa sekolah kami pasti pernah dialami oleh beberapa sekolah yg serupa. Tidak bermaksud untuk mengingat luka lama, namun jadikanlah ini sebagai contoh dan problematika remaja saat ini. 

Masih ingatlah tawuran pelajar yg berujung kematian? Anak STM atau alumni STM mungkin sudah tidak syok lagi dengan hal ini. Berita lengkapnya bisa dilihat disini.  

Tawuran, Empat Pelajar Tewas


Klo melihat kejadian itu, kenakalan remaja sekarang sudah mendekati kriminalitas, tidak sedikit dan sering saya jumpai ada beberapa siswa yg berani mengancam siswa lain, mencederai dan lebih parahnya ada beberapa yg berani mengancam kami sebagai pendidik. 

Sudah banyak cara kami lakukan, mulai dari mewajibkan ekstrakulikuler sampai memadatkan pelajaran dari jam 07:00-16:00 setiap hari. dari mulai bersikap lunak sampai mungkin ada beberapa guru yg berani melakukan kekerasan. Respon yg diberikan siswa pun bermacam-macam. Ada yg menerima dengan lapang dada, ada yg berangsur-angsur membaik, ada yg melapor orang tua sampe ke meja hijau dan ada yg terang-terangan mengancam balik kami sebagai guru. 

Guru yg seyogyanya di hormati, di gugu dan ditiru, kini sebagian dari kami merasa terancam. Istri saya berkali-kali mengingatkan bahwa saya harus menjaga ucapan, karena menurut pengalaman dia ada guru yg di cederai oleh siswa dikarenakan ucapannya kebablasan. Saya sendiri seringnya tidak mengindahkan semua itu. Meskipun sampai detik ini, saya belum pernah main tangan, namun saya yakin ada beberapa dari siswa saya yg hatinya terluka atas ucapan saya. 

Bagi kami, guru di tingkat menengah memang harus extra sabar apalagi sudah menjadi adat istiadat secara turun tumurun bahwa anak SMK itu nakal-nakal, tukang berantem, dll. Saya sendiri, sampai saat ini belum menemukan metode yg pas bagaimana caranya menghadapi siswa yg seperti ini. Sebagai guru yg tergolong masih muda, sayapun sering diskusi dan Share sama guru senior langkah apa yg harus kita lakukan sebagai guru. 

Siswa yg masuk SMK rata-rata wataknya sudah terbentuk, mulai dari Sd, SMP sebetulnya mereka sudah menunjukkan gejala itu. Klo melihat film “Great Teacher Onizuka”, ah rasanya saya ingin seperti itu. Lebih dekat dengan siswa, tidak dibatasi aturan dan selalu memposisikan diri sebagai siswa. Memang pada dasarnya anak yg nakal adalah anak yg cenderung butuh perhatian, punya masalah keluarga, dan dilanda kegalauan. Namun sayangnya, ada beberapa orang tua yg tidak menyadari hal itu. Mereka (orangtua) ada yg dengan tegas memarahi anaknya di depan kami, ada yg tidak percaya dan berdalih tidak mungkin anaknya seperti itu, dan macam-macam.Tidak sedikit ada orangtua yg menangis takut anaknya dikeluarkan, ada juga yg dengan gagah berani menawarkan anaknya untuk dikeluarkan. Entahlah saya harus bilang apa klo sudah seperti ini. 

Harapan kami, sebetulnya adalah kerja sama dalam mengawasi anak. Terlebih saat mereka kecil sampe diusia remaja. Nyatanya, anak yg sudah terbentuk sampe usia SMA itu sangatlah sulit untuk dirubah. Bagaimana pun anak bapak dan ibu hanya berada di sekolah itu dibawah pengawasan kami tidak lebih dari 7-8 jam. Jadi, kami mohon bantu kami Guru-guru di sekolah dalam pendidikan anak. Jangan sampai tugas orangtua hanya menitipkan anaknya kepada kami. 

Meskipun guru di sekolah sebagai pengganti orangtua, namun tetap saja yg mereka butuhkan adalah kalian. Kalian para orangtua yg sibuk meeting sampe larut malam, kalian orangtua yg kerja saat liburan, kalian orangtua yg banting tulang bekerja berdalih untuk pendidikan dan masa depan anak-anak nya, kami mohin tolong lebih perhatikan lagi mereka. Kami disini berjuang dan berusaha mengevaluasi diri bagaimana memberikan pendidikan yg terbaik untuk anak-anak kita, untuk bangsa kita. 

Kami disini, bukan berarti tidak mau disalahkan atau berlepas tangan dari problematika yg terjadi, namun sekali lagi kami mohon kerja samanya. Tanpa kalian, dukungan para orangtua usaha kami mungkin tidak seberapa hanya sekian persen. 

Singkatnya, apa yg sudah saya sampaikan diatas adalah realita dan problematika yg mesti kita hadapi. Terima kasih bagi siapapun yg membaca tulisan saya, mudah-mudahan jadi bahan evaluasi untuk kita semua. Mari kita sama-sama berbenah diri untuk kebaikan kita semua. 

Selamat malam

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

CSS Selector Lanjutan bagian 2

Setelah kita memahami dasar-dasar CSS pada bab sebelumnya, ternyata CSS Selector tidak hanya dibatasi oleh tag, id dan class saja. kita pun sudah membahas hal itu pada CSS Selector Lanjutan bagian 1. Untuk melengkapi pemahaman kita mengenai CSS Selector, perhatikan tabel penjelasan dibawah ini :

Selector Contoh Deskripsi Contoh Versi CSS
.[attribute] [target] Menyeleksi elemen yang memiliki attribute “target” 2
[attribute=value] [target=_blank] Menyeleksi elemen yang memiliki attribut target=”_blank” 2
[attribute~=value] [title~=css] Menyeleksi elemen yang memiliki attribut title yang mengandung kata “css” 2
[attribute|=value] [lang|=en] Menyeleksi elemen yang memiliki attribut lang yang memiliki value dengan awalan “en”.

catatan : berlaku jika value terdiri dari satu kata atau secara keseluruhan kata utamanya terdiri dari kata tersebut dan dihubungkan dengan –

2
[attribute^=value] a[href^=”https”] menyeleksi elemen <a> yang value/isi dari attribut hrefnya dimulai dengan “https” 3
[attribute$=value] a[href$=”.pdf”] menyeleksi elemen <a> yang value/isi dari attribut hrefnya diakhiri dengan “.pdf” 3
[attribute*=value] a[href*=”css”] menyeleksi elemen <a> yang value/isi dari attribut hrefnya mengandung huruf “css” 3

Perhatikan contoh dibawah ini :

Pada contoh diatas, kita lihat bahwa semua elemen terbuat dari tag <a>, namun yang memiliki attribut target adalah link 1, link 3 dan link 5. jadi, kita bisa atur langsung dengan menggunakan attribut selector [target].

jika, kita ingin lebih spesifik khusus untuk attribute dengan value tertentu, maka kita bisa menyeleksinya dengan cara [attribute=value] (lihat kembali contoh diatas, kita sudah implementasikan pada link 3 khusus untuk [target=”_self”]

Contoh Attribute lanjutan:

Silakan amati dan cermati contoh diatas, apabila ada yang kurang paham silakan kirim pertanyaan di kolom komentar. untuk case-case lainnya pada table diatas silakan di coba sendiri yah teman-teman.

Keep Learning and Good Luck ^_^
Semangat

Form

Pernahkah anda melakukan registrasi pada sebuah situs? misalnya kita melakukan pendaftaran untuk email, facebook, dan lain lain.

atau sekedar mengisi form tertentu untuk login ke suatu situs jejaring sosial?

Saya yakin kita semua sudah pernah melakukan semua itu. Sejumlah informasi yang kita masukkan ke dalam sebuah website melalu formulir yang disediakan bisa kita sebut sebagai suatu inputan.

Sejumlah inputan dapat kita kirim ke dalam sebuah sistem dengan menggunakan form. Inputan yang kita kirim digunakan oleh sistem untuk diolah dan di simpan sebelum di proses atau dicetak ke dalam suatu output.

Singkatnya, Form digunakan untuk mengoleksi inputan dari user. Sebuah form bisa terdiri dari sekelompok text, radio option, checkbox, submit button, dan masih banyak lagi yang lainnya.

Tabel Elemen Form

Elemen Pengertian
 <form></form> Membuka dan Menutup Form
 <input type=”text” /> Membuat Inputan berbentuk text (Single Line)
 <input type=”radio” /> Membuat Pilihan Inputan berbentuk radio (Single Choice)
 <input type=”checkbox” /> Membuat Pilihan Inputan berbentuk checkbox (Multiple Choice)
 <input type=”password” /> Membuat Pilihan Inputan berbentuk password (Hide Area)
 <input type=”date” /> Membuat inputan berbentuk tanggal
 <input type=”file” /> Membuat inputan berbentuk file (upload file)
 <input type=”submit” />
<button type=”submit”>
Membuat submit button
 <input type=”reset” />
<button type=”reset”>
Mereset form yang telah diisi
 <select>
<option></option>
</select>
Membuat pilihan inputan berbentuk select box
<textarea></textarea> Membuat Inputan berbentuk text (Multiple Line)
 <label> Untuk memberikan label pada inputan
 <fieldset> Mengelompokkan element-element pada form
 <legend> Memberikan caption (nama) pada fieldset
 <optgroup> Mengelompokkan/menggrupkan pilihan inputan pada selectbox

Contoh Form Sederhana

Contoh Penggunaan Form dan style

Attribut pada elemen Form

Seperti halnya attribut pada elemen lainnya attribut form juga digunakan untuk menambah informasi dan pengaturan tambahan pada elemen form yang kita buat, misalnya menambah size, jumlah rows, atau sekedar hint pada elemen yang kita buat. perhatikan contoh pada file sebelumnya, disana kita sudah menuliskan beberapa form attribute seperti placeholder, max, min dll. beberapa form attribut lain, yang akan kita pelajari diantaranya adalah :

Elemen Attribut Pengertian
Value Memberikan nilai value (hasil) pada inputan
Name Memberikan nama pada inputan
Readonly Digunakan agar inputan tidak bisa di rubah (hanya di baca)
Disabled Digunakan agar inputan tidak berfungsi
Size Menspesifikasikan jumlah (dalam karakter) untuk field inputan
Maxlength Jumlah maksimal karakter yang bisa di input
Required Digunakan agar inputan wajib diisi
Autofocus Digunakan agar ketika kita buka halaman langsung menuju inputan tersebut
Placeholder Text abu-abu sebagai hint atau petunjuk dari suatu inputan
Min and max Nilai(int) minimal dan maksimal dari suatu inputan
Height and width Merubah lebar dan tinggi suatu inputan

Jangan Lupa diri. klo gunung ada puncak tertinggi, level manusia tidak bisa diukur

Ketika kita berbicara gunung pasti bisa kita sebutkan bahwa gunung tertinggi adalah gunung Everest. namun apakah kita bisa menyebutkan manusia terpintar dalam sejarah kebudayaan manusia? meski ada beberapa kajian dan artikel ilmiah yang menyebutkan IQ tertinggi di miliki oleh seseorang namun percayalah tolak ukur kepintaran dari masa kemasa itu berbeda. jadi, klo kita mengatakan si A itu jenius, pintar dan lain lain itu adalah masa dan zamannya saat itu. tidak ada jaminan bahwa dia akan menyandang status orang terpintar itu selamanya. berbeda halnya dengan gunung everest, dari taun ke tahun tidak akan ada yg menggantikan (kecuali gunungnya kiamat sob). 😀

Continue reading “Jangan Lupa diri. klo gunung ada puncak tertinggi, level manusia tidak bisa diukur”

Table

Table sering kita gunakan untuk membuat suatu list data. misal Data Siswa, Data Mahasiswa, Data Karyawan, dll. jadi elemen table akan sering kita jumpai dan wajib kita kuasai bagaimana cara membuatnya.

Gel. SPP Reguler karyawan International Program
Diploma (D3) Sarjana (S1) Diploma (D3) Sarjana (S1)
I Rp 800.000,- Rp 1.920.000,-
(Per Semester)
Rp 2.280.000,-
(Per Semester)
Rp 2.420.000,-
(Per Semester)
Rp 2.780.000,-
(Per Semester)
USD 1.600,-/Semester
*Jaminan Kuliah + Magang di Inggris dan Singapore
II Rp 1.200.000,-
III Rp 1.700.000,-
IV Rp 2.200.000,-

Untuk membuat table seperti contoh diatas, perhatikan penjelasan dibawah ini.

  • Table di mulai dengan menggunakan tag <table>.
  • Table terdiri dari head table dan body table. header di gunakan untuk menspesifikasikan nama kolom yang akan kita buat, sedangkan body table digunakan untuk mengisi datanya.
  • Untuk membuat header table, gunakan struktur <thead><tr><td> atau <tr><th>, sedangkan untuk membuat body table kita bisa menggunakan struktur <tbody><tr><td> atau cukup <tr> <td> saja.
  • Tiap baris dalam sebuah table di mulai dengan menggunakan tag <tr>.
  • Jumlah kolom dalam setiap baris harus sama, dan didefinisikan dengan menggunakan tag <td>.
  • penggabungan cell dapat dilakukan dengan 2 cara :
    1. penggabungan baris dengan menggunakan rowspan=”n”
    2. Penggabungan kolom dengan menggunakan colspan=”n”
    3. n adalah jumlah cell yang akan digabungkan
  • table memiliki attribut khusus width, border, cellpadding, cellspacing, dll.

Contoh Table Sederhana

 

Contoh Table dengan penggabungan baris dan kolom

Catatan

  • Semua baris meskipun berada di tengah-tengah dianggap sebagai baris baru dan dimulai dengan tag <tr>.
  • Untuk membuat table yang terdiri dari beberapa penggabungan cell dan baris kita cukup menghitung jumlah kolomnya terlebih dahulu, kemudian buatlah tag <td>.
  • Jika dalam kolom tersebut terdapat penggabungan baris gunakan rowspan=”(sesuaikan dengan jumlah barisnya)”.
  • sedangkan untuk peggabungan kolom gunakan colspan=”(sesuaikan dengan jumlah kolomnya)”.

 

Contoh Table dengan warna rows yang berbeda-beda

Demikian penjelasan mengenai pembuatan table pada HTML. mudah-mudahan bermanfaat buat kita semua
Keep Learning ^_^
Semangat

CSS Selector Lanjutan Bagian 1

Seperti yang sudah kita pelajari sebelumnya, CSS Selector digunakan untuk menyeleksi elemen HTML yang akan kita sisipkan style.

Tabel dibawah ini saya ambil referensi dari W3schools/cssref. Jika anda punya kemampuan bahasa inggris yang cukup, saya sarankan anda merujuk ke sumber aslinya. dan untuk memahami lebih detail mengenai CSS Selector silakan anda baca artikel dibawah ini sampai selesai atau anda bisa langsung menuju ke halaman ini w3schools/trial

Selector Contoh Deskripsi Contoh Versi CSS
.class .intro Menyeleksi semua elemen yang memiliki class=”intro” 1
#id #firstname Menyeleksi elemen yang memiliki id=”firstname” 1
* * Menyeleksi Semua Elemen 2
element/tag p Menyeleksi semua elemen p(paragraf) 1
element,element (pisahkan dengan koma) div, p Menyeleksi semua elemen div dan p 1
element element div p Menyelesi semua elemen <p> yang ada didalam elemen <div> 1
element>element div > p Menyeleksi semua elemen <p> yang berada 1 tingkat dari elemen <div>. pada dasarnya hampir mirip dengan yang div p, namun dikhususkan untuk elemen yang berada 1 tingkat didalamnya tanpa terhalang elemen lain 2
element+element div + p Menyeleksi elemen <p> yang ditempatkan langsung setelah elemen <div> 2
element1~element2 p ~ ul Menyeleksi semua elemen <ul> yang secara hirarki sejajar dengan elemen <p> 3

Untuk memahami semua contoh diatas, perhatikan contoh dibawah ini.

Demikian materi untuk hari ini, untuk materi CSS Selector selanjutnya akan kita bahas di artikel selanjutnya. Sering-sering cek blog ini yah kawan-kawan, semoga rekan-rekan makin bersemangat untuk mempelajari CSS.

Keep Learning ^_^