Bootstrap İle Tüm ekran Boyutları Göre Web Sayfası Oluşturma — Fabrika Otomasyon Sayfası


Bootstrap İle Tüm ekran Boyutları Göre Web Sayfası Oluşturma

  1. Bu blog yazımda ulaşabileceğiniz bilgiler…
  2. Basit web sayfası oluşturma
  3. <div></div> kullanımı
  4. mysql den php ile veriyi çekme ve bu veriyi oluşturduğunuz div ,container,card class ları içinde nasıl kullandığımız.
  5. Bootstrap temel özelliklerinin kullanımı.
  6. Elementlerimizin ekran içinde dağılımını,yer paylaşımını.
  7. Ekran boyutlarına göre oluşturduğumuz elementlerin nasıl şekil alacağını ve nasıl şekillendirebileceğiniz.
  8. Sayfa başlığına icon ekleme.
  9. Php ile mysql’den veri çekme.
  10. Bootsrap ile dinamic tablo oluşturma.
  11. Oluşturulan tabloya php ile mysql’den veri çekerek yazma ve otomatik satır eklenmesi.
  12. Web sayfanın belirli periyotlarda otomatik yenilenmesi.

 

Arkadaşlar blog yazısını okumadan önce şunu belirteyim.Bu konudaki fazla bir bilgim olmadığı ve ilk çalışmam olduğu için bazı yerlerde yanlış anlatımlarım olmuş olabilir affola.Amacım belki bir kaç arkadaşımız burada işine yarayacak birkaç şeyler bulur ve işini kolaylaştırmış oluruz.Konuyla ilgili her türlü önerilerinizi ve görüşlerinizi beklemekteyim.

Merhaba arkadaşlar bootstrap ile web sayfasına geçmeden önce ;

Bu sayfayı yapmam daki amaç Bir havlu üretimi yapılan fabrika da makinanın üretim, tüketim, başlangıç saati, duruş sati,durma nedeni vs. gibi bilgileri yönetici kişiye döküman halinde sunulması idi.(Makinadan verileri ARDUINO ile alıp seri haberleşme ile masaüstü bilgisayarımızdan c# ile verileri okumak ve okuduğumuz verileri c# ile mysql databese’mize yazmayı  ayrı bir blog yazımızda değineceğiz…) Konuya dönecek olursak ilk başta  böyle bir web sayfası düşünmemiştik düşüncemiz makinadan gelen bu verileri c# la accespointe yazmak oradanda günlük olarak exel’de tablo yapıp yöneticiyi sunmak şeklindeydi, ancak daha güzel ve kullanışlı olacağı için böyle bir web sayfası eklemeye karar verdik.Projede 3 arkadaşımla beraber çalıştım. Görev dağışımlarımız ; arkadaşlarım Arduino ile makinadan verileri okumak ve c# la access pointe yazmak ve exel’de tablo oluşturmak.Benim yaptığım kısım c# ile , gelen verileri hosting’imde oluşturduğum mysql database’me yazmak  ve bu verileri oluşturduğum web sayfamdandan çekip kullanıcıya sunmak. Daha önceden Android-Java üzerinde, hostingimdeki mysql’imde işlemlerde bulunmuştum ancak hiç bir web sayfası oluşturma ve bu sayfasında mysql’den veri çekme işlemi yapmamıştım.Benim içinde güzel bir tecrübe oldu aslında…

Yavaşca web sayfamıza giriş yapalım… 🙂

Web sayfamızın son hali (fabrika yöneticisine sunacağım şekli): Fabrika Otomasyon

Görsel Arayüz:

1

 

2

 

 

Bu web sayfasını oluşturmadan önce bu iş için oluşturduğum ancak bütün ekran boyutları(mabil,tablet,pc vs..) uyum sorunlarından dolayı vazgeçtim sayfamdan başlayacak olursak.

Arkadaşlar konuya geçmeden önce bilgisayarınıza wamp server’ın veya türevleri programların  kurulu olması gerekmekte hazırladığımız php kodlarını bu sanal server üzerinde çalıştıracağımız için gerekmektedir.Bu konuyla ilgi gerekli kaynak internette mevcuttur.

İlk web sayfamın görsel arayüzünü Android’de o zaman üzerinde çalıştığım Meterial Design’ şeklinde yapmaya çalıştım elimden geldiğince;

Görsel arayüz:

meterial

 

Programlama kısmı:

meterial.php dosyamız… Arkadaşlar bu dosya wampserver’ımızda–>www klasörünün altında olmalıdır… isterseniz burada bir .text dosyası oluşturabilir uzantısını .php değiştirerek kodları yazıp,web sayfanızdanda wampserver’inize bağlanarak her yaptığınız adımın sonuçlarını görebilirsiniz. yada bu işler için olan ide’leri (Adobe Dreamweaver,vnotped++, brackets,.. ) kullanabilirsiniz yöntemler size ait. Aşağıda  web sayfasına ait kod mevcuttur açıklamayı bu kodlar içine not düşerek anlatayım…

önce wamp server’ımızda bir database ve tablo oluşturalım

Tablo oluşturmak için phpmyadmin e girip sql yazan yere tıkladığınızda.

yazın.

database içinde tablo oluşturmak için…Bu benim tablomdaki veri makinadan aldığım veriler.

 

 

 

Arkadaşlar bu php kısımda mysql db’imize bağlantı sağladığımız kısım. Wamp server’imizda oluşturduğumuz yetkili kullanıcı adı ve paralasını yazıyoruz…Burada dikkat etmemiz gereken kısım eyer daha önce php ile mysql işleleri ile uğraştıysanız bileceksiniz bağlantı oluşturma şekli; önceki versiyonlarda @mysql_connect('host', 'kullanıcı adı', 'şifre'); deyip bağlantı oluşturuluyorken artık PHP veritabanı işlemleri için doğrudan mysql_ li fonksiyonların kullanımını tavsiye etmiyor olmasından dolayı böyle @mysql_connect diyerek bağlantıda uyarı veriyor olması... Bu yüzden php ile mysql bağlantısında pdo ile sağladık.Bu konuda türkçe kaynakların çoğu eski usule göre hazırlanmış.

 

anlatılabilecek bütün kısım buydu:)

Aşağıda kullanıcıya göstereceğimiz html kısım mevcut. Burada anlatılabilecek çok bir şey yok aslında tamemen size kalmış bir tasarım mevcut.Zaten aşağıdaki kodları kurcalarken öğreneceğiniz şeyler burada yazandan daha açıklayıcı ve tesirli olacaktır.Kısaca değinilecek olursak benim bu html kısmı kodlarken öğrendiğim kadarıyla burada da öyle yaptım, herşey <div> metodu üstünden yürüyor.Yazılarımız, iconlarımız herşeyimiz bu <div> metotları içinde.<div metodu ile ekranda istediğimiz yerlere konumlandırmamız, boyutları filan ayarlamamız çok kolay oluyor.Diğer kullandığımız araçları zaten <div metodu içinde olduğu için otomatik div’e göre şekil almış oluyorlar.<Div>’de class, id style ve title gibi özelliklerde mevcut bu özellikler ile daha özelleştirilmiş bir görünüm elde edebilirsiniz.

<style></style> aralığında kendi özelleşmiş class’larımı oluşturdum burada oluşturmamın amacı her defasında aynı kodları tekrar tekrar yazmamak sadece bu class’ı çağırarak kullanmak.Oluşturduğum bu classları  genellikle <div >de kullandım.

 

 

burada

diyerek material design de kullanılan yazı stillerini(Fontlarını)  eklemem.

 

 

 

 

 

 

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

Buraya kadar olan kodlar ve anlatım meterial design şeklinde oluşturmaya çalıştığım web sayfamdı.Bu sayfamdan baştada belirttiğim gibi ekran boyutlarına göre görünüm sağlayamamdı.Css bilgimin olmamasından dolayı bu sayfayı ekran boyutlarına göre otomatik hizalama yapamadım.Biraz araştırmalarımdan sonra bu iş için en uygun yöntemin bootstrap olacağı tavsiye edildi.Biraz araştırmalarımdan sonra bootstrap kullarak güzel bir web sayfası daha oluşturmayı başardım. Bootstrapla ilgili türkçe kaynak özellikle youtubede mevcut ve güzel anlatımlar var.Şimdi web sayfamıızın son haline geçecek olursak…

Önce bootstrapla ilgili css dosyalarını ve jquery den  en son sürüm jquery indirip alttaki resimde görüldüğü gibi kaynak klasörümüzün içine atmalı ve <body></body> tagları arasında ki jqueryle değiştirmelisiniz.

öncelikle bootstrap kullanarak hazırladığım bu web sayfasını buradan hazır olarak indirdim ve üzerinde değişiklikler yaparak modifiye ettim ve kullanacağım son haline getirdim.Burada da çok fazla detaylı anlatımada girmiyorum. Burada sizin için önemli olan hosting imden verileri nasıl çektiğim ve bunu çektiğim verileri sayfada nasıl gösterdiğim olacaktır.

  1. ilk olarak yukarıda verdiğim linkten hazır web sayfasını indirelim.
  2. Daha sonra bu indirdiğimiz dosyaları wamp server’ımızın www klasörüne atalım ve buradan düzenlemeye başlayalım.

indirdiğiniz klasörlerde dashboard diye olan sayfayı ben index.php yaptım.Çünkü linki yazdığımda direk olarak açılacak sayfamın bu olması için.

dosya uzantımın .php olmasındaki sebebide dosyamızın içinde mysql db’imize bağlanacağımız php kodları bulunduğu ve bu kodların çalışması için php dosyası yaptım.

Benim kendi web sayfa tasarımıma göre 2 tane sayfa yeterliydi.Makinadan gelen güncel verileri göstereceğim bir sayfa ve gün boyunca üretimi ve durumu göstereceğim bir sayfa.

Bu yüzden dashboard ve table adındaki 2 sayfanın dışındaki sayfaları sildim.

Bu sayfaları silince dosyaları tuttuğum klasörümün görüntüsü şöyle oldu.

indexphp

 

 

asıl işlemler sayfa tasarımında.

index.php sayfamız:

Arkadaşlar bu sayfada hosting bilgilerimi <?php satırının altında

diyerek import ettim.

Burada beni en çok yoran kısımlar php ile mysql den verileri çekip bu sayfada istediğim yerde nasıl kullanacağım oldu.Bunun için örnek olarak Türkçe bir kaynak vs. döküman bulamadım.

Burada arkadaşlar bootstrap da  benim en çok kullandığım kısımlar ekran boyutlarıyla ilgili sorunlarımı çözen özellikle  row, container, cal-lg-12 vs gibi komutlar oldu bunları araştırmanızda fayda olabilir.

Birde sayfanın otomatik olarak yenilenmesi için

Bu kodu eklemelisiniz.Bu kodu eklememdeki amaç web sayfamızda mysql’den çektiğimiz verilerin sayfada gösterilmesi için yenilenmesi gerekiyor.Bu komutla sayfamızı otomatik olarak 4sn bir yenilenmesini sağladık.

Bu sayfa daki kodlar için de bulacağınız bilgiler….

 

  1. mysql den php ile veriyi çekme ve bu veriyi oluşturduğunuz div ,container,card class ları içinde nasıl kullandığımı.
  2. Bootstrap temel özelliklerinin kullanımı.
  3. Elementlerimizin ekran içinde dağılımını,yer paylaşımını.
  4. Ekran boyutlarına göre oluşturduğumuz elementlerin nasıl şekil alacağını ve nasıl şekillendirebileceğiniz.

Gibi bilgilere ulaşabilirsiniz.

 

 

 

 

 

 

 

Buradaki kodlarımızda ise mysql db’imizde oluşan bilgiler ile günlük istatistikleri kullanıcıya göstereceğimiz dinamik bir tablo yapma   ve bu tabloda php ile çektiğimiz verilerin gösterimini sağladık.

Buradaki tablonun özelliği mysql’ imizde oluşacak satır sayısını bilmediğimiz için tablomuzda da standart bir satır sayısı belirtemiyoruz.Bu yüzden dinamik(yani mysql imizde  kaç satır varsa ona göre otomatik oluşacak )  bir   tablo oluşturuduk.Ve bu tablo içinde php ile verileri çekip yazdırdık.

 

 

 

Bu tablo oluşturma işlemini şu şekilde yapabilirsiniz.

table.php dosyamızda ulaşabileceğiniz bilgiler.
  1. Sayfa başlığına icon ekleme.
  2. Php ile mysql’den veri çekme.
  3. Bootsrap ile dinamic tablo oluşturma.
  4. Oluşturulan tabloya php ile mysql’den veri çekerek yazma.

Gibi bilgilere ulaşabilirsiniz.

 

 

 

Bir yorum ekleyin

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

two × two =

This site uses Akismet to reduce spam. Learn how your comment data is processed.