Kamis, 11 Februari 2016

Install W3schools Offline Version.7z di Local


Kali ini saya ingin membagi ilmu yang saya punya, yaitu menginstall W3schools Offline.
Berikut langkah-langkahnya :

1. Download terlebih dulu File W3schools Offlinenya Klik disini!

2. Kemudian kamu Buka terminal


3. Kamu masuk pada dokumen tadi yang sudah kamu download. kalau punya saya file yang tadi saya download berada pada file downloa. Kemudian kamu ketikkan perintah : 
   # cd Downloads/


4. Lalu kamu copy di /var/www/html/ dengan perintah :
    # cp w3schools\offline\version.7z /var/www/html/


5. Kemudian kamu masuk di /var/www/html/
   # cd /var/www/html/


6. Kamu Extrack File tersebut menggunakan perintah seperti dibawah ini :
   # p7zip -d w3schools\offline\version.7z


7. Kamu ganti nama W3schools Offline Version.7z dengan nama sesukamu atau kalau kamu tidak ingin menggantinya juga tidak apa-apa.
   # mv w3schools\offline\version.7z w3schools


8. Kemudian kamu masuk pada file yang telah kamu buat
   # cd w3schools/


9. Kamu beri akses untuk dokumen tersebut dengan perintah :
   # chown -R www-data:www-data w3schools/


10. Dan kamu harus beri akses lagi untuk file tersebut agar bisa di buka.Berikut perintahnya :
   # chmod 775 w3schools/


11. Kemudian kamu beri hak akses didalam file w3shools. berikut perintahnya
   # chmod 775 *


12. Jika kamu sudah lakukan perintah seperti saya diatas, berarti kamu sudah Selesai menginstall W3schools Offline Version.7z. Lalu kamu coba ketikan di browser localhost/w3schools maka akan muncul gambar seperti dibawah ini


Akan muncul seperi gambar seperti di bawah ini

@... @

Share:

Pengertian P.O.A.C. Dalam Ilmu Manajemen

      Secara umum, Dunia manajemen menggunakan P.O.A.C. Prinsip manajemen ini banyak digunakan oleh Organisasi kecil maupun besar untuk mengembangkan dan mengelola Organisasi. Penjelasan dari P.O.A.C sendiri adalah :

Planning (Perencanaan)
     Planning adalah proses mendefinisikan tujuan organisasi, membuat strategi untuk mencapai tujuan itu dan mengembangkan rencana aktivitas kerja dalam sebuah organisasi. Perencanaan merupakan proses yang penting dari segala bentuk fungsi Manajemen, karena tanpa adanya perencanaan semua fungsi-fungsi lainnya tidak akan dapat berjalan.

Dalam perencanaan, Terdapat beberapa faktor dalam Planning yang patut untuk dipertimbangkan, yaitu :

  • Specific, yaitu berarti sebuah perencanaan harus jelas apa maksut dan tujuanya beserta ruang lingkupnya.
  • Measurable, yaitu suatu tingkat keberhasilan yang harus dapat diukur dari program kerja dan rencana yang dibuat.
  • Achievable, yaitu sesuatu tersebut bisa tercapai dan diwujudkan, bukan hanya sekedar fiktif dan khayalan belaka.
  • Realistic, yaitu sesuatu yang sesuai dengan kemampuan dan sumber daya yang ada, harus seimbang tetapi tetap ada tantangan didalamnya.
  • Time, yaitu ada batas waktu yang jelas, sehingga bisa dinilai dan dievaluasi.
Organizing (Pengorganisasian)
     Organizing adalah fungsi kedua dalam Manajemen. Organizing adalah proses kegiatan dalam menyusun struktur organisasi sesuai dengan tujuan-tujuan, sumber-sumber dan lingkungannya. Dengan demikian, hasil dari pengorganisasian itu berupa struktur organisasi.

Setiap tujuan disebuah organisasi pasti ingin dicapai, dan untuk meraih hal tersebut, pengorganisasian sangat berperan penting. Dalam sebuah perusahaan, pengorganisasian biasanya disusun dalam bentuk badan organisasi atau struktur organisasi, setelah tiu baru dipecah menjadi beberapa jabatan. Disinilah letak salah satu prinsip Manajemen yang membagi setiap tugas dan tanggung jawab dalam sebuah perusahaan yang dibebankan pada semua anggota organisasi menurut skill dan kemampuan masing-masing individu.

Actuating (Penggerakan atau Pelaksanaan) 
     Actuating adalah suatu tindakan yang mengusahakan agar semua perencanaan dan tujuan perusahaan bisa terwujud dengan baik dan seperti yang diharapkan. Jadi, pelaksanaan merupakan suatu upaya yang menggerakkan orang-orang untuk mau bekerja dengan sendirinya dan dengan kesadaran yang besar demi mengabulkan seluruh cita-cita perusahaan dengan dan secara efektif.

Perencanaan dan pengorganisasian akan berjalan kurang baik jika tidak disertai dengan pelaksanaan. Oleh karena itu, sangat dibutuhkan sekali bentuk nyata dari kerja keras, kerjasama dan kerja nyata didalamnya. Pengoptimalan seluruh sumber daya manusia yang ada juga sangat penting, terutama ditujukan untuk mencapai visi, misi dan Planning yang telah diterapkan.

Dalam poin ini, semua sumber daya manusia yang ada harus bekerja sesuai dengan tugas yang dibebankan, fungsi serta peran dan kompetensi dari masing-masing untuk mencapai tujuan organisasi atau perusahaan tersebut.

Controlling (Pengendalian atau Pengawasan)
     Controlling adalah proses pengamatan, penentuan standar yang akan diwujudkan, menilai kinerja pelaksanaan, dan jika diperlukan mengambil tindakan korektif, sehingga pelaksanaan dapat berjalan dengan semaksimal mngkin dalam mencapai tujuan perusahaan.

Agar pekerjaan dapat berjalan sesuai dengan yang diharapkan, maka akan dibutuhkan pengontrolan yang optimal, baik itu dalam bentuk supervisi, pengawasan, inspeksi dan audit.

Tujuan utama dari kegiatan pengawasan adalah menciptakan kegiatan-kegiatan manajemen yang dinamis dan terwujud secara efektif dan efisien. Sesuai dengan perannya dalam sebuah organisasi, Controlling memiliki beberapa fungsi utama :

  • Mencegah terjadinya penyimpangan
  • Memperbaiki kelemahan dan kesalahan, serta menindak penyalahgunaan dan penyelewengan
  • Mendinamisasikan organisasi serta kegiatan dalam manajemen
  • Memperkuat rasa akan tanggung jawab tiap individu
  • Mengambil tindakan korektif jika pelaksanaan menyimpang dari Perencanaan atau standar yang telah ditetapkan.
@  ... @
Secara umum, dunia manajemen menggunakan prinsip POAC. atau Planning, Organizing, Actuating, dan Controlling. Prinsip manajemen ini banyak digunakan oleh organisasi dewasa ini untuk memajukan dan mengelola organisasi mereka. Berikut akan kami jelaskan masing masing point tersebut : - See more at: http://www.maswit.com/2013/06/poac-planning-organizing-actuating-and.html#sthash.nlNBjMm4.dpuf
Secara umum, dunia manajemen menggunakan prinsip POAC. atau Planning, Organizing, Actuating, dan Controlling. Prinsip manajemen ini banyak digunakan oleh organisasi dewasa ini untuk memajukan dan mengelola organisasi mereka. Berikut akan kami jelaskan masing masing point tersebut : - See more at: http://www.maswit.com/2013/06/poac-planning-organizing-actuating-and.html#sthash.nlNBjMm4.dpuf
Secara umum, dunia manajemen menggunakan prinsip POAC. atau Planning, Organizing, Actuating, dan Controlling. Prinsip manajemen ini banyak digunakan oleh organisasi dewasa ini untuk memajukan dan mengelola organisasi mereka. Berikut akan kami jelaskan masing masing point tersebut : - See more at: http://www.maswit.com/2013/06/poac-planning-organizing-actuating-and.html#sthash.nlNBjMm4.dpuf
Share:

Selasa, 09 Februari 2016

Bootstrap Affix

Bootstrap Afiks Plugin (Advanced) 

The Afiks Plugin

The Afiks Plugin memungkinkan unsur untuk menjadi ditempel (terkunci) ke suatu daerah pada halaman. Hal ini sering digunakan dengan menu navigasi atau tombol ikon sosial, untuk membuat mereka "tongkat" di kawasan tertentu sementara bergulir ke atas dan ke bawah halaman.
Plugin matikan perilaku ini dan mematikan (perubahan nilai posisi CSS dari statis untuk tetap), tergantung pada posisi gulir. 
Contoh 1) Sebuah navbar ditempel:


Contoh 2) Sebuah sidebar ditempel:


Dengan Afiks, ketika kita gulir ke atas dan ke bawah halaman, menu selalu terlihat dan terkunci di posisinya.

Cara Membuat menu ditempelkan Navigasi Contoh berikut menunjukkan cara membuat menu navigasi ditempelkan horisontal: 
Contoh
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
 
Contoh berikut menunjukkan cara membuat menu navigasi vertikal ditempel: 
Contoh  
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">

misalnya Dijelaskan

Tambahkan data-spy="affix" ke elemen Anda ingin ditempel.
Opsional, tambahkan data-offset-top|bottom atribut untuk menghitung posisi gulir.

Bagaimana itu bekerja

Imbuhan Plugin matikan antara tiga kelas: .affix , .affix-top , dan .affix-bottom . Setiap kelas mewakili negara tertentu. Anda harus menambahkan properti CSS untuk menangani posisi yang sebenarnya, dengan pengecualian position:fixed pada .affix kelas.
  • Plugin menambahkan .affix-top atau .affix-bottom kelas untuk menunjukkan elemen dalam top-sebagian besar atau paling bawah posisi. Positioning dengan CSS tidak diperlukan pada saat ini.

  • Bergulir melewati elemen ditempel memicu pembubuhan yang sebenarnya - ini adalah di mana plugin menggantikan .affix-top atau .affix-bottom kelas dengan .affix kelas (set position:fixed ). Pada titik ini, Anda harus menambahkan CSS top atau bottom properti untuk posisi elemen ditempel di halaman.

  • Jika bagian bawah diimbangi didefinisikan, bergulir melewati itu menggantikan .affix kelas dengan .affix-bottom . Sejak offset adalah opsional, menetapkan satu mengharuskan Anda untuk mengatur CSS yang sesuai. Dalam hal ini, menambahkan position:absolute bila diperlukan.
Pada contoh pertama di atas, plugin Afiks menambahkan .affix kelas (posisi: fixed) ke <nav> elemen ketika kita telah menggulir 197 piksel dari atas. Jika Anda membuka contoh, Anda juga akan melihat bahwa kita menambahkan CSS top properti dengan nilai 0 ke .affix kelas. Hal ini untuk memastikan bahwa navbar tetap di bagian atas halaman di semua waktu, ketika kita telah menggulir 197 piksel dari atas.

Scrollspy & Afiks Menggunakan Afiks Plugin bersama-sama dengan Scrollspy Plugin:
 
Horizontal Menu (Navbar)
Contoh
<body data-spy="scroll" data-target=".navbar" data-offset="50"> 
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Menu Vertikal (Sidenav)
Contoh
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
  ...
</nav>

</body>

Referensi : http://www.w3schools.com/bootstrap/bootstrap_affix.asp 

Share:

Minggu, 07 Februari 2016

Workshop Master PHP Indonesisa Hari Kedua

Membuat Web mulai dari awal
Hari minggu ini target kita membuat web dari awal sampai selesai, sambil dibimbing sama kakak-kakak PHP Indonesia yang mengajari kita. Langkah-langkah yang harus kita lakukan untuk membuat web yaitu seperti dibawah ini:
 
untuk membuat website , kita buat database nya terlebih dahulu
  • - kita masuk dulu ke php my admin
  • - lalu buat database nya
  • - setelah create table , buka database yang sudah kita buat barusan lalu buat table nya
  • - setelah itu kita buat table sesuai kebutuhan/desain yang sudah ditentukan
  • - setelah itu kita isi nama,type inputannya
  • - setelah tabel jadi silahkan klik insert
  • - jika table artikel,user,dan kategori sudah selesai seperti ini , lalu koneksikan phpnya
  • - buka sublime text lalu ketikkan script koneksi di php seperti yang diterangkan
Share:

Sabtu, 06 Februari 2016

Workshop Master PHP Indonesisa Hari Pertama



Hari pertama ikut Workshop Master PHP Indonesia anak-anak di BLC Telkom Klaten mendapatkan pembelajaran yang sangat padat sekali, karena hanya 2 hari mereka mengajar dan banyak materi yang harus mereka sampaikan jadi kami semua harus mengejar meteri itu :)

Hari pertama Workshop ini hanya menjelaskan dari dasar dan masih bersifat teori. Materi yang diajarkan :
1. PHP
2. HTML dan CSS
3. MySQL dan Database
4. Javascript
5. JQUERY
6. AJAX

1. PHP (HyperText PreProcessor)

Pencipta :
  • Rasmus Lerdorf
  • Zeev Suraski
  • Andi Gutmans
Keunggulan :
  • Gratis
  • Cross Platform (windows, Linux, Mac OS, dll)
  • Mendukung banyak database
  • On The Fly (dengan PHP dapat membuat teks word, excel, PDF, dsb)
Yang menggunakan PHP, seperti :
  • Facebook
  • dll.
 Jenis-jenis PHP :

1. PHP Operator
2. PHP Assignment
3. PHP Perbandingan

PHP menggunakan sebagai berikut.
  • Argumen If
  • Argumen If dan else
  • Argumen If, else, if else
  • Perulangan While
  • Perulangan For
2. HTML dan CSS

Membuat file css dengan nama style.css kemudian memanggil data tersebut menggunakan <link rel="stylesheet" href="style.css"> kemudian menggunakan perintah <div> untuk memanggil coding yang kita butuhkan.

3. MySQL 

MySQL adalah database server. Sedangkan SQL adalah bahasa untuk berinteraksi dengan database. PHPMyAdmin adalah berfungsi untuk mempermudah atau sebagai tools saja.
  • Database
  • MySQL : RDBMS (Relation Database Management System)
Bagian-bagian :

a. Insert, berfungsi menuliskan data ke database.
  •  INSERT INTO
buku_telp (nama, alamat)
  •  VALUES
b.  Select, berfungsi untuk menampilkan data.
  • SELECT * FROM
c. Update
UPDATE nama_table
 SET nama="Roni", alamat="Boyolali"
 WHERE="1"
 d. DELETE
DELETE FROM nama_table WHERE id= " "
4. JavaScript
Java dan Javascript sebenarnya berbeda.
Keunggulan :
  • Bisa berjalan pada platform apa saja.
  • Selalu identik dengan script
  • Bersifat kecil dan ringan
  • Cliet Side Programming
Share:

Jumat, 05 Februari 2016

Penerapan Buttons pada Web

Disini banyak koding-koding dalam penerapan Web salah satunya berikut contohnya

Styles tombol

Bootstrap memberikan tujuh gaya tombol: 
Untuk mencapai tombol gaya di atas, Bootstrap memiliki kelas-kelas berikut:
  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link
Contoh berikut menunjukkan kode untuk tombol yang berbeda gaya:
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
Kelas Tombol dapat digunakan pada <a> , <button> , atau <input> elemen: 
Contoh
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">



Ukuran tombol

Bootstrap memberikan empat ukuran tombol: 
Kelas-kelas yang mendefinisikan ukuran yang berbeda adalah
  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs 
Contoh berikut menunjukkan kode untuk ukuran tombol yang berbeda: 
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Tombol blok Tingkat

Sebuah tombol tingkat blok meliputi seluruh lebar dari elemen induk.
Menambahkan kelas .btn-block untuk membuat tombol tingkat blok: 
Contoh
<button type="button" class="btn btn-primary btn-block">Button 1</button>

Active / Buttons Dinonaktifkan

Sebuah tombol dapat diatur untuk aktif (muncul ditekan) atau cacat (unclickable) negara:
Kelas .active membuat tombol muncul ditekan, dan kelas .disabled membuat tombol diklik: 
Contoh
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

Grup tombol

Bootstrap memungkinkan Anda untuk kelompok serangkaian tombol bersama-sama (pada satu baris) dalam kelompok tombol: 
Gunakan <div> elemen dengan kelas .btn-group untuk membuat grup tombol: 
Contoh
<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
Tip: Daripada menerapkan tombol ukuran untuk setiap tombol dalam kelompok, menggunakan kelas .btn-group-* ukuran semua tombol dalam kelompok: 
Contoh
<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Grup Tombol vertikal

Bootstrap juga mendukung kelompok tombol vertikal: 
Menggunakan kelas .btn-group-vertical untuk membuat grup tombol vertikal: 
Contoh
<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Grup Tombol dibenarkan

Span seluruh lebar layar, gunakan .btn-group-justified kelas:
Misalnya dengan <a> elemen: 
Contoh
<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>
Catatan: Untuk <button> elemen, Anda harus membungkus setiap tombol di .btn-group kelas: 
Contoh
<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Samsung</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

Nesting Tombol Grup & Dropdown Menu


kelompok tombol sarang untuk membuat menu dropdown: 
Contoh
<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

Dropdown Tombol Berpisah

Contoh 
<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
  </ul>
</div>

Share:

Kamis, 04 Februari 2016

Penerapan Jumbotron pada Web

Sebuah jumbotron menunjukkan sebuah kotak besar untuk memanggil perhatian ekstra untuk beberapa konten khusus atau informasi.
Sebuah jumbotron ditampilkan sebagai kotak abu-abu dengan sudut membulat. Hal ini juga memperbesar ukuran font teks di dalamnya.
Tip: Di dalam jumbotron Anda dapat menempatkan hampir semua HTML yang valid, termasuk elemen Bootstrap lainnya / kelas.
Gunakan <div> elemen dengan kelas .jumbotron untuk membuat jumbotron:

bootstrap Tutorial

Bootstrap adalah HTML, CSS, dan kerangka JS paling populer untuk mengembangkan responsif, proyek seluler pertama di web.

Jumbotron Inside Kontainer

Tempatkan jumbotron dalam <div class="container"> jika Anda ingin jumbotron untuk tidak memperpanjang ke tepi layar:
Contoh
<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</di>

Jumbotron luar Kontainer

Tempatkan jumbotron luar <div class="container"> jika Anda ingin jumbotron untuk memperpanjang ke tepi layar:
Contoh
<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
  mobile-first projects on the web.</p>
</div>
<div class="container">
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

Membuat Header Halaman

Sebuah header halaman seperti bagian divider.
The .page-header kelas menambahkan garis horizontal di bawah judul (+ menambahkan beberapa ruang tambahan di sekitar elemen):

Misalnya Header Halaman

Gunakan <div> elemen dengan kelas .page-header untuk membuat header halaman:
Contoh
<div class="page-header">
  <h1>Example Page Header</h1>
</div>

Share:

Rabu, 03 Februari 2016

Membuat Tabel untuk Awal Membuat Website


 Peintah title seperti di atas yaitu untuk memasukkan nama yang anda ketik dan akan muncul di atas browser, hasilnya seperti dibawah ini :


Jika diberi koding seperti ini :


maka hasilnya akan seperti di bawah ini :



Jika ingin lebih bagus lagi maka beri Navbar, berikut kodingnya


Hasil seperti berikut :


Share: