Müzik çalar uygulaması (Nodejs + Express + Mongodb)

Kullanıcı müzik dosyalarını upload ederek online müzik çalar oluşturmaktadır. Eklenilen müziklerin metadatası yükleme esnasında veritabanına kaydedilmektedir. Eğer bilgiler boş ise kullanıcı yükleme işlemi bittikten sonra bilgileri güncelleyebilmektedir.

Anasayfa

1nodemusicapp

Listeden müzik ismine çift tıklandığı zaman müzik çalmaya başlamaktadır. Çalan müziği durdurup tekrar başlatmak için altta bulunan trackbar üzerindeki butonlar ile yapılır. Çalan müziğin kalan süresi progress bar ile gösterilmektedir.

2nodemusicapp

Müzik ile ilgili detayları düzenlemek veya silmek için actions altında bulunan update ve remove butonları kullanılır.

3nodemusicapp

Advertisements

Shopping cart uygulaması (Nodejs + Express + MongoDb)

Nodejs + Express ve MongoDb kullanarak yapmış olduğum alışveriş sepeti uygulaması. Template için hbs template engine kullandım.Github linki

Ana sayfa aşağıda gösterilmiştir. Kullanıcı giriş yapmasa bile sepete ürün ekleyebiliyor. Ancak order ile hesap verebilmesi için giriş yapması zorunludur.

home

Alışveriş sepeti için ayrı bir ekranda bulunmaktadır. Burada order butona tıklanınca form açılıp ekranda seçili ürünleri aldınız mesajı gösterilecektir.

shopping list page

Software Design Patterns

Tasarım şablonları ile ilgili github üzerinden herbiri ile ilgili örnekler paylaşmayı düşünüyorum.

Abstract Factory ve Adapter pattern ile ilgili 2 tane yazı mevcuttur. Bunları örnekler ile güçlendirip diğer tasarım şablonlarınıda aynı şekilde yazacağım.

Github linki

Mevcut eklenenler:

  • Creational Design Patterns (Yaratımsal tasarım şablonları)
    • Factory Method Pattern (C#)

Node.JS Uygulamaları

Node.Js ile yapmış olduğum bazı projeleri bu yazı başlığı altında topluyorum.

Hava Durumu Uygulaması

Kullanıcı zip code girerek veya şehir/eyalet bilgisi girerek hava durumu tahmini görüntülemektedir. Zip code kullanarak konum bilgisi çekmek için “zippity-do-dah” isimli module kullanılıyor. Konum bilgisine göre hava durumu bilgisini ise forecastio modülü kullanılarak elde etmekteyiz. Bu siteden api key elde ederek modulü uygulamaya ilave ediyoruz.

Herhangi bir arkaplan resmi eklemedim sade bıraktım.

ekran-alintisi

 

İlk form kısmında zip code değerini ekleyip arama yapıyoruz.

ekran-alintisi2

Şehir ve eyalet değerlerini girip arama yaparsak

ekran-alintisi3

Github linki

 

ASP.NET MVC Authentication ve Authorization

Asp.net MVC tabanlı yapmış olduğum kullanıcı girişi, kullanıcı kayıt etmek ve kullanıcıları yetkilendirme işlemi yapan mini projeyi paylaşıyorum.

Kullanılan Teknolojiler

  • ASP.NET MVC 5
  • BOOTSTRAP 3
  • ENTİTY FRAMEWORK 6

Yaptığım bu mini projede amaç kullanıcı giriş,kayıt ve yetkilendirme işlemlerinin nasıl yapıldığını göstermektir.Proje ile ilgili gerekli geliştirmeleri eklemeye devam edeceğim.

Github linki

1
Giriş yapılmamış ana sayfa ekranı

 

Giriş ekranı
Giriş ekranı

 

Kayıt ekranı
Kayıt ekranı

 

Giriş yapıldıktan sonra ana sayfa
Giriş yapıldıktan sonra ana sayfa

Müşteri yönetimi

AngularJS kullanarak müşteri yönetimi sistemi geliştiriyorum. Proje ile ilgili eklediğim önemli özellikleri blog yazısı olarak paylaşıyor olacağım.

NodeJS tabanlı http-server üzerinden projeyi çalıştırıyorum. Daha sonrasında projeyi Asp.net mvc tabanlı geliştirmeyi planlıyorum

Proje ile ilgili görselleri ve işleyiş ile ilgili detayları hem buradan hem de github üzerinde proje tanıtım kısmında yazacağım.

Projede kullandıklarım hakkında detaylı yazılar:

AngularJS Pagination

Github Linki

Bootstrap 3 admin teması

Bootstrap 3 ile hazırlamakta olduğum admin projesinin github linki aşağıdadır.

Jquery,Angularjs gibi js kütüphaneleri kullanılmaktadır.Gerekli resimleri bu yazıya ekleyeceğim.

Daha sonra oluşturduğum bu admin temasını oluşturacağım asp.net mvc projesinde kullanacağım

Gerekli kaynak kodları ve detaylı anlatım : Projenin github linki

HTML5 Drag&Drop

html5 ile sürükle bırak yöntemiyle yapılmış olan dosya yükleme projesinin detaylarını ve  kaynak kodlarını github üzerinden paylaştım.

html5’in bize sağladığı; .ondrop , .ondragover ve .ondragleave mouse eventlerinden faydalanmaktayız.

Uygulamanın ekran görüntüleri aşağıdaki gibidir.Kullanımı bilindiği gibi
yüklemek istediğiniz resmi dosya yükleme alanına sürükleyerek yükleme işlemi gerçekleşmektedir.Herhangi bir sayfa yenileme işlemi olmadan dosyamız yüklenmektedir.Bunun için xmlhttprequest’i kullandık.index sayfamızda post işlemi yapıp upload.php kısmında dosyaların klasöre yüklenme işlemi yapılmaktadır.

overview

 

dragdrop2

 

 

Codeigniter RSS

Codeigniter framework kullanılarak yapmış olduğum rss oluşturma ve spor internethaber sitesinden çekilen futbol haberlerinin olduğu bir uygulamayı paylaşıyorum.

Uygulamanın kaynak kodlarına github hesabım üzerinden erişebilirsiniz.

Uygulama içeriği

Uygulamayı anlatacak olursak ilk önce her zaman codeigniter ile uygulama oluşturduğumuz gibi standart düzenlemeleri yapıyoruz.Feed controller ana controller olup aşağıdaki gibi tanımladık.Ana controller tanımlamak için config/routes.php kısmından default controllerımızı feed olarak belirledik.Construct kısmında yani controller ilk çağrılında işlem yapacak olan kısmımızda xml helperı ve model (database)’i çağırdık.Autoload.php dosyamızda daha önceden her zaman çağrılacak şekilde tanımladığımız database kütüphanesini , text,html ve url helperlarını çağırmıştık.

index fonksiyonumuz bizim uygulama browserdan çağrılınca gelecek fonksiyonumuzdur.Buradan ulaştığımız view anasayfamızdır oradaki gerekli yönlendirmelerle rss oluşturucu veya haber çekilen kısımlara ulaşabiliyoruz.

Create fonksiyonumuzda rss oluşturmak için gerekli tanımlamaları dizi olarak tanımlayıp , $this->load->view(‘rss’,$data); olarak rss viewe atıyoruz.

$data[‘posts’] = $this->post->getPosts() bu kısımda veritabanında rss oluşturmak için kaydettiğimiz verilerimizi elde edip data dizisi içine attık.

xmlparse() kısmında haberleri çekeceğimiz kısıma yönlendirme işlemi yapmaktadır.O kısımda yapacağımız işlemleri view dosyasında yapacağız o yüzden ana kontrollerda sadece oraya yönlendirme işlemi yaptık.

Feed.php (main controller)

class Feed extends CI_Controller {
 
 public function __construct() {
    parent::__construct();
    $this->load->helper(array('xml'));
    $this->load->model('Post_model', 'posts');
 }
 
 public function index(){
    $this->load->view('index');
 }
 
 public function create(){
    // standart tanımlamaları yaptık.
    $data['feed_name'] = 'asd.com';
    $data['encoding'] = 'utf-8';
    $data['feed_url'] = 'http://www.asd.com/feed';
    $data['page_description'] = 'some text bla bla';
    $data['page_language'] = 'en-en';
    $data['creator_email'] = 'ekiny018@gmail.com';
    // veritabanından verileri çektik.
    $data['posts'] = $this->posts->getPosts();
    // bu kısmı eklemezsek düzenli olarak rss gözükmez.
    header("Content-Type: application/rss+xml;");
 
    $this->load->view('rss',$data);
 }
 
 public function xmlparse(){
    $this->load->view('xmlparse');
 }
 
}

Post_model.php (database)

class Post_model extends CI_Model {
    function getPosts($limit = NULL){
       return $this->db->get('posts',$limit);
    }
 }

Active record sınıfını kullanarak veritabanından verilerimizi çekiyoruz.Limitin değerini null olarak tanımladık istersek kaç tane veriyi çekebileceğimizi belirtebiliriz.

Rss.php

<?php echo '<?xml version="1.0" encoding="' . $encoding . '"?>' . "\n"; ?>
<rss version="2.0"
 xmlns:dc="http://purl.org/dc/elements/1.1/"
 xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
 xmlns:admin="http://webns.net/mvcb/"
 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 xmlns:content="http://purl.org/rss/1.0/modules/content/">
 
 <channel>
 
 <title><?php echo $feed_name; ?></title>
 
 <link><?php echo $feed_url; ?></link>
 <description><?php echo $page_description; ?></description>
 <dc:language><?php echo $page_language; ?></dc:language>
 <dc:creator><?php echo $creator_email; ?></dc:creator>
 
 <dc:rights>Copyright <?php echo gmdate("Y", time()); ?></dc:rights>
 <admin:generatorAgent rdf:resource="http://www.codeigniter.com/" />
 
// foreach ile diziye attığımız posts değerlerini yazdırdık.
 <?php foreach($posts->result() as $post): ?>
 
 <item>
 
 <title><?php echo xml_convert($post->title); ?></title>
 <link><?php echo $post->id; ?></link>
 <guid><?php echo $post->id; ?></guid>
 
// önemli kısım
 <description><![CDATA[ <?php echo character_limiter($post->text, 200); ?> ]]></description>
 <pubDate><?php echo $post->date; ?></pubDate>
 </item>
 
 
 <?php endforeach; ?>
 
 </channel>
</rss>

Xmlparse.php

Haberleri çekmek istediğimiz yerden simplexml_load_file metodu ile çekip gerekli her bilgiye ulaşabiliyoruz.Veriler çekeceğimiz xml dosyasının görüntüsü aşağıdaki gibidir.

xml

$news->channel->item diyerek tüm tanımlanan itemları ulaşıyoruz.Itemlardaki içeriklere ->title , ->link diyerek ulaştık

<ul class="menu">
 <div class="haber">
 <?php 
 $news = simplexml_load_file('http://spor.internethaber.com/rss/futbol.rss');
 $count = 0;
 foreach ($news->channel->item as $newsinfo):
 if($count == 10){
 break;
 }
 $title = $newsinfo->title;
 $link = $newsinfo->link;
 echo '<li><div class="title"><a href='.$link.'>'.$title.'</a></div></li>';
 $count++;
 endforeach;
 ?>
 </div>
 </ul>

 Ekran Görüntüleri

index
index.php
rss.php
rss.php

 

 

haberxml
haberxml.php