Selasa, 28 September 2021

Layout Baris Dan Kolom Mobile Programming💻

 Layout Baris Dan Kolom Mobile Programming💻

Assalamualaikum wr.wb
Hallo sahabat ngoding artikel kali ini membahas mengenai membuat layout baris dan kolom pada materi mobile programming. Berikut alat dan bahan yang digunakan:

a. Pc/Laptop yang memenuhi kapasitas mobile programming
b. Internet yang memadai
c. Smartphone 
 
1. Teori
    Layout adalah suatu tampilan tata letak pada android studio untuk mengatur penempatan text/gambar sesuai yang kita inginkan. jadi layout di sini adalah bagian terpenting untuk memperindah tampilan atau design pada aplikasi yang kita buat agar nyaman di lihat bagi pengguna aplikasi, Layout di bagi menjadi 4 yaitu:
    a. Linear Layout
    b. Relative Layout
    c. Frame Layout 
    d. Table Layout
 Liniear Layout adalah design sebuah tampilan pada aplikasi kita dengan tata letak secara vertical maupun horizontal dimana tata letak aplikasi yg kita buat hanya bisa memasukan media secara mendatar dan menurun.

Relative Layout design tampilan pada aplikasi kita dengan tata letak secara bebas tanpa aturan sesuai keinginan kita.tidak seperti Linear Layout yang hanya terpaku pada salah satu tampilan vertical dan horizontal.

Constraint Layout mirip dengan Relative Layout, akan tetapi karena letak View bergantung pada View lain dalam satu Layout ataupun dengan Parent Layoutnya. Contohnya pada Relative Layout kita dapat meletakkan sebuah View pada bagian atas, bawah, atau samping di View lain. Kita juga dapat mengatur posisinya berdasarkan Parent Layout menggunakan tag seperti centerVertical, alignParentBottom, dll. Akan tetapi, Constraint Layout jauh lebih fleksibel dan lebih mudah digunakan di Layout Editor.

Frame Layout adalah Layout yang biasanya digunakan untuk membuat objek yang saling bertindihan contohnya yaitu kita membuat button di atas image.

Table Layout adalah Layout yang digunakan untuk membangun user interface (tampilan antar muka ) aplikasi android dengan berdasarkan Baris dan Kolom.

Table Layout terdiri dari:

    a. Row/ baris pada dasarnya digunakan untuk menyimpan satu jenis record,             hanya satu informasi yang dapat disimpan.

    b. Kolom adalah sub bagian terbagi dari setiap baris dan satu baris dapat                 menampung beberapa jenis kolom. Setiap kolom terdiri dari jenis informasi yang        berbeda mengenai baris tersebut.

Tag Table Layout

Beberapa tag pada Table Layout :

  1. TableLayout : Tag pembuka untuk menggunakan TableLayout
  2. TableRow : Tag untuk membuat Baris
    Inti dari mekanisme layout pada flutter adalah widget. Di Flutter semua adalah widget termasuk layout itu sendiri juga merupakan widget. Gambar, icon, dan text yang terdapat pada flutter adalah widget. Selain sesuatu yang tidak terlihat juga merupakan widget, seperti bari, kolom mauapun grids.

2. Langkah-Langkah
    a. Buka Aplikasi Visual Studio Code

b. Setelah semua selesai pastikan hanphone terkoneksi dengan pc atau laptop yang digunakan untuk mengoneksikan mennggunakan kabel USB, pastikan keduanya memiliki koneksi internet yang cukup  kemudian  pilih bagian view >> command palette
c.  Maka akan muncul teks box, pada taks box tersebut ketikkan flutter new application project seperti gambar dibawah ini

d. Kemudian akan diarahkan kebagian lokasi penyimpanan  untuk menyimpan projek yang akan dibuat Setelah selesai peletakan penyimpanan, setelah muncul, pada bagian folder test widget_test.dart komentari semua script dengan cara ctrl+a+? .

e. Setelah selesai masuk kebagian main dart hapus semua script yang terdapat pada file main.dart setelah dihapus buat source code seperti dibawah ini.

f. 
Setelah selesai runningkan program yang sudah dibuat, jika berhasil akan tampil pada smartphone seperti gambar dibawah ini, setelah tampil 
g. Selanjutnya untuk membuat body yang berisi baris dan kolom, pada main dart tadi tambahkan source code nya seperti gambar dibawah ini 

h. Setelah selesai kemudian runningkan maka pada smartphone dan browser akan tampil seperti gambar dibawah ini 

3. Penjelasan Source Code
    import 'package:flutter/material.dart'; // Tempat menyimpan data dari program yang dibuat //

class LayoutRow extends StatelessWidget { // Nama kelasnya adalah LayoutRow, yang mana dalam kelas ini terdapat StatelessWidget yaitu kelas yang memuat widget yang sifatnya statis atau tetap //
  Widget build(BuildContext context) { // Merupakan fungsi yang harus ada untuk kelas yang akan menampilkan widget ke layar perangkat bergerak //
    return MaterialApp( // Nilai balikan berupa MaterialApp //
        home: Scaffold( // Dalam nilai balikan ini terdapat menu Home //
            appBar: AppBar( // bara yang berada diatas aplikasi //
              flexibleSpace: SafeArea( // Merupakan Widget Fleksibel space //
                  child: Container( // terdapat suatu wadah //
                child: Column( // membuat sebuah kolom //
                  children: [ // kemudian terdapat anak //
                    Row( // Baris pertama //
                      children: [ // didalamnya terdapat anak //
                        IconButton( // terdapat tombol //
                          icon: Icon(Icons.menu),// Terdapat ikon dari menu //
                          tooltip: 'Navigation menu', // terdapat Tombol atau menu navigasi //
                          onPressed: null, // null disables the button
                        ),
                        Spacer(),
                        Text( // masukkan teks //
                          'Kantin Politeknik Kampar',
                          textAlign: TextAlign.center,
                        ), // Ini merupakan teks yang akan tampil pada layar //
                        Spacer()
                      ],
                    )
                  ],
                ),
              )),
            ),
            body: Container( // untuk wadah bagian ini berisi body//
              child: Column( // terdapat juga kolom //
                children: [
                  Row( // dan membuat Baris //
                    children: [
                      Text( // masukkan teks //
                        'Kolom Pertama Baris Pertama', // isi dari teks //
                        textAlign: TextAlign.left,
                      ), // Pada bagian kiri //
                      Spacer(),
                      Text( // masukkan teks //
                        'Kolom Kedua Baris Pertama',
                        textAlign: TextAlign.center,
                      ), // Untuk bagian tengah pada layar //
                      Spacer(),
                      Text( // masukkan teks //
                        'Kolom Ketiga Baris Pertama',
                        textAlign: TextAlign.right, // untuk bagian kanan //
                      ),
                    ],
                  )
                ],
              ),
            )));
  }
}

void main() { // Fungsi pada program //
  runApp(LayoutRow()); // Jalankan program dengan nama kelas LayoutRow//
}



















Continue reading Layout Baris Dan Kolom Mobile Programming💻

Selasa, 21 September 2021

Multi Chat Network Programming💻

 Multi Chat Network Programming💻

Assalamualaikum, wr.wb 
    Hallo sahabat ngoding, Artikel kali ini membahas mengenai komunikasi client server lebih dari satu client atau multi client, Salah satu model umum yang diterapkan untuk pemrograman jaringan adalah model client atau server. Sehingga secara umum jika ingin mengembangkan suatu aplikasi jaringan, maka aplikasi tersebut dikenal juga dengan aplikasi client atau server. Sebagai contoh salah satu aplikasi yang menggunakan model client atau server adalah chatting. Aplikasi chatting ini menggunakan prinsip dimana client atau user melakukan permintaan untuk terkoneksi dengan server dan memanfaatkan fasilitas-fasilitas yang disediakan oleh server. Setelah melalui pengujian dan analisa, dapat diketahui bahwa sistem tersebut secara keseluruhan telah berjalan sesuai dengan yang diharapkan, dan mempunyai kelebihan yaitu dengan banyaknya client yang dapat terhubung ke jaringan dan dapat berkomunikasi satu sama lain melalui chatting. Selain itu aplikasi chatting ini dapat berjalan di setiap sistem operasi karena dibuat dengan bahasa pemrograman Java yang bersifat multi platform.

Langkah-langkah yang dilakukan 
1. Buka Netbeans,  bisa menggunakan aplikasi seperti sublime text, visual studio code atau yang lainnya.
    
2. Selanjutnya membuat Chat Server Multi, untuk membuatnya menggunakan source code seperti dibawah ini :
    
Berikut penjelasan source code :

import java.io.*;  // merupakan fungsi yang memasukkan data dan mengeluarkan data//

import java.net.*; //Merupakan perintah Program Java berisi kelas-kelas  yang memperbolehkan program berkomunikasi melewati jaringan//

public class ChatServerMulti{ // Merupakan nama kelas dari program yaitu, ChatServerMulti //

private static ServerSocket servSock; // ServerSocket, class ini merupakan ciri khas bahwa class tersebut diterapkan untuk server. Ketika client tidak membutuhkan kelas tersebut. //

private static final int PORT = 1234 ; // ini adalah nomor port dari ServerSocket//

public static void main(String args[]) // fungsi dalam program// throws IOException{

 System.out.println("Opening Port.....\n"); // sistem yg akan menampilkan hasil//

 try{ // ulangi//

 servSock = new ServerSocket(PORT); // instruksi untuk memasukkan nomor port//

 }catch(IOException e){

 System.out.println("Unable to attach to port"); // menampilkan keluaran//

 System.exit(1); // sistem untuk keluar//

 }

 do{

 Socket client = servSock.accept();// Client akan menerima dari server//

ClientHandler handler = new ClientHandler(client);

 handler.start();

 }while(true);

}

}

class ClientHandler extends Thread{

private Socket client ;

private BufferedReader in ;

private PrintWriter out ;

public ClientHandler(Socket socket){

 client = socket ;

 try{

 in = new BufferedReader(new

 InputStreamReader(client.getInputStream()));

 out = new PrintWriter(client.getOutputStream(),true);

 }catch(IOException e){

 e.printStackTrace();

 }

}

public void run(){ // suatu fungsi untuk menjalankan program//

try{ // jika gagal ulangi//

 String received ; // untuk penerimaan pesan menggunakan tipe data string//

 do{

 received = in.readLine();

 System.out.println(received); // tampilan ketika pesan sukses dikirim//

 out.println("ECHO : " + received); // telah sukses atau diterima//

 }while(!received.equals("QUIT")); /) sudah diterima dan keluar//

}catch(IOException e){

 e.printStackTrace();

}

finally{ /)

 try{ // ulangi//

 if (client != null){

 System.out.println("Closing down connection"); // sistem yg menampilkan penutupan dari koneksi//

 client.close(); // Penutupan dari client//

 }

 }catch(IOException e){

 e.printStackTrace();

 }

}

}

} // Setiap kodingan selesai akhiri dengan tanda kurung kurawal//

3. Selanjutnya membuat Chat Client Multi , untuk membuatnya menggunakan source code seperti berikut:

Berikut Penjelasan source code

import java.io.*; // merupakan fungsi input output atau masukan data dan keluaran dari data //

import java.net.*; // fungsi yang memperoleh kan data terkoneksi //

public class ChatClientMulti{ // merupakan nama kelas dari program yaitu ChatClientMulti//

private static InetAddress host ; // merupakan alamat dari host//

private static final int PORT = 1234; // merupakan nomor port//

private static Socket link ; // pada tahap ini masukkan alamat dari soket//

private static BufferedReader in ;

private static PrintWriter out ;

private static BufferedReader keyboard ;

public static void main(String args[]){

 try{

 host = InetAddress.getLocalHost();

 link = new Socket(host,PORT);

 in = new BufferedReader(new

InputStreamReader(link.getInputStream()));

 out = new PrintWriter(link.getOutputStream(),true);

 keyboard = new BufferedReader(new InputStreamReader(System.in));

 String message, response; //. Akan menerima sebuah pesan bertipe data string //

 do{

 System.out.print("Enter message(QUIT to exit)"); // sistem yg menampilkan untuk memasukkan sebuah pesan ke server//

 message = keyboard.readLine(); // pesan //

 out.println(message); /) tampilan dari pesan//

 response = in.readLine();

 System.out.println(response);

 }while(!message.equals("QUIT"));

 }catch(UnknownHostException e){

 System.out.println("Host ID not found!");

 }

 catch(IOException e){

 e.printStackTrace();

 }

 finally{ // selesai//

 try{ // ulangi lagi //

 if (link != null){ // jika alamat yg dimasukkan salah atau null//

 System.out.println("Closing down connection"); // sistem yg akan menutup koneksi//

 link.close(); // penutupan alamat //

 }

 }

 catch(IOException e){

 e.printStackTrace();

 }

 }

}

} // Setiap codingan selesai akhiri dengan tanda kurung kurawal tutup//

 4. Setelah selesai Kemudian runningkan program dengan cara masuk ke lokal penyimpanan source code nya kemudian  klik kanan pada file lalu pilih git bush here

5. Selelah itu panggil program server dengan menggunakan syntax, "javac ChatServerMulti.java" >> java ChatServer >>. Setelah selesai memanggil servernya dilanjutkan pemanggilan client dengan membuka tab get bash here baru untuk client dilanjutkan untuk pemanggilan client nya "javac.ChatClientMulti.Java" >> java ChatCLientMulti >> selanjutnya enter maka akan tampil seperti gambar dibawah ini
 
Program chatting antara client dan server sudah berhasil dibuat, cukup sekian pembahasan artikel kali ini semoga dapat membantu dan menambah wawasan, see you👋👋










~SEMOGA BERMANFAAT💓💓💗💖~







 



    
Continue reading Multi Chat Network Programming💻

Jumat, 17 September 2021

AppBar_Mobile Programming💻

 AppBar_Mobile Programming💻

Assalamualaikum wr.wb

Hallo sahabat ngoding, artikel kali ini membahas mengenai cara menambahkan button pada bar yang berbasis android alat dan bahan yang dibutuhkan adalah :
a. PC/ laptop yang memenuhi kapasitas untuk mobile programming
b. Koneksi Internet yang memadai

1. Buka visual studio code
    
2.Pastikan hanphone terkoneksi dengan pc atau laptop yang digunakan untuk mengoneksikan mennggunakan kabel USB, pastikan keduanya memiliki koneksi internet yang cukup  kemudian  pilih bagian view >> command palette
    

3. Maka akan muncul teks box, pada taks box tersebut ketikkan flutter new application project seperti gambar dibawah ini 
    

4. Kemudian akan diarahkan kebagian lokasi penyimpanan  untuk menyimpan projek yang akan dibuat


5. Setelah selesai peletakan penyimpanan kemudian akan tampil beberapa file seperti gambar dibawah ini, setelah muncul, pada bagian folder test widget_test.dart komentari semua script dengan cara ctrl+a+? .
    

6. Setelah selesai masuk kebagian main dart hapus semua script yang terdapat pada file main.dart setelah dihapus buat source code seperti dibawah ini 

7.  Setelah selesai runningkan program yang sudah dibuat, jika berhasil akan tampil seperti gambar dibawah ini

8. Setelah semuanya selesai akan tampil pada layar hp seperti gambar dibawah ini


9. seperti inilah aplikasi yang sudah terdownload pada handphone kita 


10. Berikut Penjelasan source code:
    setelah program menambahkan material.dart, selanjutnya membuat class baru yakni class TutorialHome. Kelas TutorialHome akan memuat kelas StatelessWidget indikatornya menggunakan kata extends sehingga source code menjadi Class TutorialHome extends StatelessWidget dengan demikian maka semua komponen yang terdapat pada kelas StatelessWidget dapat digunakan oleh kelas TutorialHome Untuk membuat nama class harus menggunakan huruf kapital. Kelas StatelessWidget adalah kelas yang memuat widget yang sifatnya statis mudahnya setelah data ditampilkan maka kita tidak akan merubahnya lagi. Widget build (BuildContext context) merupakan fungsi yang harus ada untuk kelas yang akan menampilan widget atau tampilan ke layar perangkat bergerak. Atau dalam docs flutter disebutkan sebagai instan untuk membentuk widget. Selanjutnya instant dari build memiliki nilai balikan berupa MaterialApp indikatornya terdapat pemanggilan fungsi return MaterialApp(). Fungsi ini memuat berbagai widget didalamnya seperti title,home dan lain-lain.

a.             a.   Fungsi main() adalah fungsi khusus dari dart. Ketika aplikasi dijalankan, maka fungsi ini yang               pertama kali dijalankan. Pada contoh, fungsi main hanya menjalankan class MyApp.

  1. MyApp adalah StatelessWidget, merupakan widget induk;
  2. MaterialApp adalah widget yang membungkus beberapa widget yang menggunakan tema material design 1;
  3. Scaffold adalah widget untuk struktur dasar material design;
  4. AppBar adalah widget untuk membuat AppBar;
  5. Center adalah Widget layout untuk membuat widget ke tengah;
  6. Text adalah wdiget untuk membuat teks.






~SEMOGA BERMANFAAT💓💕💖~














Continue reading AppBar_Mobile Programming💻

Rabu, 15 September 2021

Menampilkan Hallo_Dunia dengan menggunakan visual studio code💻

 Menampilkan Hallo_Dunia dengan menggunakan visual studio code💻

Assalamualaikum, wr wb hallo sahabat ngoding...
artikel kali ini membahas mengenai mobile programming, menampilkan hallo dunia menggunakan visual studio code dan akan menghasilkan output pada handphone, untuk membuatnya harus Memahami dengan baik perangkat perangkat bergerak (mobile), Mengetahui sistem operasi untuk perangkat bergerak (mobile) serta Mengetahui bahasa pemrograman native dan framework pengembangan mobile apps khususnya Android.

Native
    Aplikasi native atau native app adalah sebuah perangkat lunak yang dibangun menggunakan bahasa pemrograman tertentu untuk platform dengan sistem perangkat yang berbeda-beda. Tidak seperti aplikasi web umum yang hanya dibentuk menggunakan Javascript. Aplikasi ini adalah aplikasi yang ditulis dalam bahasa pemrograman spesifik yang dapat diterima oleh platform yang dituju, baik itu iOS, Android, atau OS lainnya. Misalnya, Swift atau Objective-C digunakan untuk membentuk aplikasi iOS asli dan Java digunakan untuk merakit aplikasi untuk Android. Alat dan bahan yang digunakan adalah : 
1. PC/ laptop yang memenuhi kapasitas untuk mobile programming
2. Akses Internet yang memadai
3. Handphone

Langkah awal yang harus dilakukan  adalah :

1. Buka visual studio code
    

2. Setelah masuk ke visual studio code nya install flutter dan dart nya untuk bagian flutter instal pada bagian flutter widget snippets,[ff] flutter files, dan flutter tree.
    

3. Pada penginstalan dart ada 4 dart yang harus diinstal dart import, dart data class generator, dart (syntax highlighting only) dan json to dart model.
    

4. Setelah semua selesai pastikan hanphone terkoneksi dengan pc atau laptop yang digunakan untuk mengoneksikan mennggunakan kabel USB, pastikan keduanya memiliki koneksi internet yang cukup  kemudian  pilih bagian view >> command palette
    

5. Maka akan muncul teks box, pada taks box tersebut ketikkan flutter new application project seperti gambar dibawah ini 
    

6. Kemudian akan diarahkan kebagian lokasi penyimpanan  untuk menyimpan projek yang akan dibuat

7. Setelah selesai peletakan penyimpanan kemudian akan tampil beberapa file seperti gambar dibawah ini, setelah muncul, pada bagian folder test widget_test.dart komentari semua script dengan cara ctrl+a+? .
    
8. Setelah selesai masuk kebagian main dart hapus semua script yang terdapat pada file main.dart setelah dihapus buat source code seperti dibawah ini untuk teks "hallo dunia"  bisa diubah sesuai keinginan.
    
9. Setelah selesai runningkan program yang sudah dibuat, jika berhasil akan tampil seperti gambar dibawah ini, setelah tampil 
    
10. Setelah semuanya selesai akan tampil pada layar hp seperti gambar dibawah ini 
    
seperti inilah aplikasi yang sudah terdownload pada handphone kita 
    







~SEMOGA BERMANFAAT💓💕💖~





 
 







Continue reading Menampilkan Hallo_Dunia dengan menggunakan visual studio code💻