uvod - webdizajn.ict.edu.rswebdizajn.ict.edu.rs/.../dipl_php_lara_2016_radmilo_dimi… · web...

VISOKA ŠKOLA STRUKOVNIH STUDIJAZA INFORMACIONE I KOMUNIKACIONE TEHNOLOGIJE

INTERNET TEHNOLOGIJE

“Podrška za učenje stranog jezika u Laravel-u”WEB APLIKACIJA U LARAVEL FRAMEWORKU

Z a v r š n i r a d

Mentor: Student:

Dr Nenad Kojić, dipl. inž. Radmilo Dimitrijević 7/13

Beograd, 2016.

1

VISOKA ŠKOLA STRUKOVNIH STUDIJAZA INFORMACIONE I KOMUNIKACIONE TEHNOLOGIJE

INTERNET TEHNOLOGIJE

Predmet: Web programiranje PHP2Tema: Web aplikacija kao podrška za učenje stranog jezika u Laravel-u

Ocena ___ ( )

Članovi komisije:

______________________

______________________

______________________

2

Sadržaj

1. UVOD......................................................................................................................................52. RADNO OKRUŽENJE............................................................................................................63. ORGANIZACIJA.....................................................................................................................7

3.1 Blok šema...............................................................................................................................73.2 Stranice...................................................................................................................................7

3.2.1 Index................................................................................................................................73.2.2 AboutMe.........................................................................................................................83.2.3 Chart................................................................................................................................93.2.4 Words..............................................................................................................................93.2.5 Kanji..............................................................................................................................103.2.6 Admin/login...................................................................................................................103.2.7 Admin............................................................................................................................11

4. Kodovi....................................................................................................................................124.1 IndexController....................................................................................................................124.2 ChartController....................................................................................................................124.3 KanjiController....................................................................................................................174.4 WordController....................................................................................................................204.5 BaseController.....................................................................................................................254.6 AdminController..................................................................................................................264.7 AboutMeController..............................................................................................................304.8 Models..................................................................................................................................31

4.8.1 Admin...........................................................................................................................314.8.2 Kanji..............................................................................................................................314.8.3 KanjiLevel.....................................................................................................................324.8.4 Word..............................................................................................................................324.8.5 Category........................................................................................................................32

4.9 Views...................................................................................................................................334.9.1 layouts/master................................................................................................................334.9.2 includes/footer...............................................................................................................344.9.3 includes/header..............................................................................................................344.9.4 frontend/aboutme...........................................................................................................354.9.5 frontend/chart................................................................................................................384.9.6 frontend/index...............................................................................................................40

3

4.9.7 frontend/kanji................................................................................................................454.9.8 frontend/words...............................................................................................................474.9.9 admin/login....................................................................................................................484.9.10 admin/uploadEverything.............................................................................................49

4.10 Javascript............................................................................................................................504.10.1 chartAjax.js..................................................................................................................504.10.2 main.js........................................................................................................................534.10.3 aboutMe.js...................................................................................................................544.10.4 words.js........................................................................................................................56

4.11 CSS.....................................................................................................................................584.11.1 main.css.......................................................................................................................584.11.2 myStyle.css..................................................................................................................82

5. Baza Podataka............................................................................................................................855.1 Baza......................................................................................................................................85

6. Zaključak................................................................................................................................867. Literatura................................................................................................................................87

4

1. UVOD

Web aplikacija kao podrška za učenje stranog jezika u Laravel-u je namenjena kao pomoć za učenje japanskog jezika, kao i da služi za motivaciju. Ideja je nastala zbog potrebe da se lakše pretražuju reči, kao i da se grafički prikaže napredak, kako zbog zanimljivosti tako i zbog motivacije da se svaki mesec bude sve bolji i bolji. Zamisljeno je da se celo ažuriranje reči kao i Kanji znakova vrši importovanjem csv-a, što omogućava znatno brži unos reči kao i mogućnost da se unose značenja reči kako se uče. Mogućnost unosa ima trenutno samo admin tj ja, jer je zamišljeno da u početku aplikacija služi samo za jednog korisnika, dok ostali mogu da pristupaju svim delovima sajta i da prate napredak, funkcija kao learning-blog. Jedna od glavnih funkcija sajta jeste grafički prikaz broja naučenih reči. Omogućena su dva tipa grafika. Kao i mogućnost da se vidi prikaz za svaki mesec u izabronoj godini. Reči su podeljene po tipu i po grupi, dok Kanji znakovi spadaju svi pod jednu kategoriju. U svakom trenutku se može isključiti željena tip reči iz grafičkog prikaza.Druga bitna funkcija je prikaz svih reči, na startu se prikazuju dvadeset poslednje unetih reči bez obzira na tip i grupu. A moguće je izabrati odgovarajuću grupu, i samo reči iz te grupe će se prikazati. Takodje prelaskom preko reči se otvara prozor koji prikazuje kako se ta reč menja po vremenima i druge karakteristike reči specifične samo za tu grupu reči ili samo za tu reč.Postoji i prikaz Kanji znakova, njihov prevod, izvorno čitanje, usvojeno čitanje kao i najčešći slučajevi reči u kojima se taj znak koristi. Postoji i mogućnost kontaktiranja admina, putem kontakt forme ukoliko su zainteresovani da oni imaju svoj deo za praćenje.

5

2. RADNO OKRUŽENJE

U toku izrade sajta korišćeno je razvojno okruženje:• Sublime Text Editor

Programski jezici koji su korišćeni za izradu aplikacije:• HTML5• CSS• Bootstrap(Korišćen je Flat bootstrap template )• PHP Framework Laravel• JavaScript• jQuery

Baza podataka:• MySql

Biblioteke korišćeme za izradu sajta:• bootstrap.min.css• font-awesome.min.css• jquery-1.12.0.min.js• jquery.isotope.min.js• highcharts.js

6

https://shapebootstrap.net/item/1524965-flat-theme-free-responsive-multipurpose-site-template

3. ORGANIZACIJA

3.1 Blok šema

Na slici 1. prikazana je organizaciona šema stranica web aplikacije. Imena stranica predstavljaju imena kontrolera u MVC strukturi. Organizovano je tako da svaka strana može da vodi na svaku stranu, dok na stranicu admin mogu da udje samo admin, jer se na toj strani vrši import csv-a.

Slika 1 – Organizaciona struktura sajta

3.2 Stranice

3.2.1 Index

Na slici 2. prikazana je indeks stranica, kratak uvod u funkcionalnosti sajta, i prikaz poslednjih 6 Kanji znakova.

7

Slika 2 – Početna stranica

3.2.2 AboutMe

Slika 3 – AboutMeNa slici 3. se nalaze informacije o meni na Japanskom i Engleskom jeziku kao i kontakt forma.

8

3.2.3 Chart

Slika 4 – ChartsSlika 4. je jedna od glavnih stranica, grafički prikaz, sa zvaki mesec za izabranu godinu.

Dve vrste grafika. Kao i ukupan prikaz reči i znakova za dati mesec.

3.2.4 Words

Slika 5 – WordsSlika 5. je stranica za prikaz svih reči kao i njihovo filtriranje. I promene reči po vremenima.

9

3.2.5 Kanji

Slika 6 – KanjiSlika 6 je stranica za prikaz kanji znakova sa paginacijom.

3.2.6 Admin/login

Slika 7 Login formaNa slici 7 nalazi se login forma za pristup admin panelu

10

3.2.7 Admin

Slika 8 – Admin stranaNa slici 8 nalazi se forma za unos CSV fajlova.

11

4. Kodovi

4.1 IndexController

<?php

namespace App\Http\Controllers;use Illuminate\Http\Request;use Illuminate\Support\Facades\Response;use App\Word;use App\Category;use App\Kanji;use App\KanjiLevel;

class IndexController extends BaseController{

public function getIndex(){$kanjisEverything=Kanji::orderBy('id','desc')->take(6)->get();$i=0;foreach($kanjisEverything as $k){

$kanjis[$i]=array('meaning'=>$this->splitAndTrim($k['meaning'],0),'other_readings'=>$this-

>splitAndTrim($k['other_readings'],1),'main_reading'=>$this-

>splitAndTrim($k['main_reading'],0),'kanji_writing'=>$k['kanji_writing'],'level_name'=>$k->kanjiLevel->name);

$i++;}

if(count($kanjisEverything)==0){$kanjis=null;

}return view('frontend.index',['kanjis'=>$kanjis]);

}}

4.2 ChartController

<?php

namespace App\Http\Controllers;use Illuminate\Http\Request;use App\Word;use App\Category;

12

use DB;use Illuminate\Support\Facades\Response;

class ChartController extends Controller{

public function getCharts(){

//Calling function for all months$existingMonths=$this->getExistingMonths();$existingYears=$this->getExistingYears();$everythingForChart=$this->getEverythingForChart();// $countKanjis=$this->getCountWords();// print_r($countKanjis[0]->Broj);die;// $countWords=$this->getCountWords();// print_r($countWords[0]->Broj);die;

$finalNumberKanjis=$this->getCountKanji(); $finalNumberWords=$this->getCountWords();

// print_r($existingYears);die;

return view('frontend.chart',['pele'=>'ChartController','jsonNumbers'=>$everythingForChart['jsonNumbers'],'jsonDays'=>$everythingForChart['jsonDays'],'existingMonths'=>$existingMonths,'existingYears'=>$existingYears,'finalNumberWords'=>$finalNumberWords,'finalNumberKanjis'=>$finalNumberKanjis]);

}

public function postAjaxChartChange(Request $request){ $this->validate($request,[ 'chartType'=>'required|alpha', 'monthNumber'=>'required|numeric', 'ClickedYear'=>'required|numeric' ]);$typeChart=$request['chartType'];$monthNumber=$request['monthNumber'];$year=$request['ClickedYear'];$finalNumberKanjis=$this->getCountKanji($monthNumber,$year);

$finalNumberWords=$this->getCountWords($monthNumber,$year);$everythingForChart=$this->getEverythingForChart($monthNumber,$year);$monthName=date("F", mktime(0, 0, 0, $monthNumber, 10));// print_r($everythingForChart);die;if($request->ajax()){

return response()->json([ 'chartType' => $typeChart, 'everythingForChart'=>$everythingForChart, 'monthNumber'=>$monthNumber,

13

'thisYear'=>$year, 'monthName'=>$monthName, 'finalNumberWords'=>$finalNumberWords, 'finalNumberKanjis'=>$finalNumberKanjis]);}

}

//Get all months that exists in Database for current yearprivate function getExistingMonths($year=null){

if($year==null){$year=date("Y");

}$months = DB::select("select DATE_FORMAT(`created_at`, '%m') as 'Mesec'

FROM `words` WHERE YEAR(created_at)='$year' GROUP BY DATE_FORMAT(`created_at`, '%m')");

$existingMonths=array();foreach ($months as $month) {

$OtoA=(array)$month;$existingMonths[]=date("F", mktime(0, 0, 0, $OtoA['Mesec'], 10));

}return $existingMonths;

}private function getExistingYears(){

$years = DB::select("select DATE_FORMAT(`created_at`, '%Y') as 'Year' FROM `words` GROUP BY DATE_FORMAT(`created_at`, '%Y')");

$existingYears=array();foreach ($years as $year) {

$OtoA=(array)$year;$existingYears[]=$OtoA;

}return $existingYears;

}private function getEverythingForChart($month=null,$year=null){

//Get all numbers for specific month//Include years

if($month==null){$month=date("m");

}if($year==null){

$year=date("Y");

14

}

$AllCountNumbers=DB::select("SELECT count(id) as 'Broj', DATE_FORMAT(`created_at`, '%d') as 'Dan',category_id as idType,created_at FROM `words` WHERE YEAR(created_at)='$year' GROUP BY category_id,created_at,DATE_FORMAT(`created_at`, '%d') HAVING MONTH(created_at) = '$month'");

$allCountKanjiNumbers=DB::select("SELECT count(id) as 'Broj', DATE_FORMAT(`created_at`, '%d') as 'Dan',created_at FROM `kanjis` WHERE YEAR(created_at)='$year' GROUP BY DATE_FORMAT(`created_at`, '%d'),created_at HAVING MONTH(created_at) = '$month'");

//Should be for current month $days= date("t", mktime(0, 0, 0,$month , 10)); $nizDana=array(); for($i=1;$i<=$days;$i++) { $nizDana[]=$i; }

//Make a nice array $countRuWords=array();$countUWords=array();$countIWords=array();$countNaWords=array();$countKanji=array();

$j=0; while(count($allCountKanjiNumbers)>$j){ $ObjectToArrayKanji=(array)$allCountKanjiNumbers[$j]; $countKanji[$ObjectToArrayKanji['Dan']]=(int)$ObjectToArrayKanji['Broj']; $j++; } $i=0; while(count($AllCountNumbers)>$i) {

$ObjectToArray=(array)$AllCountNumbers[$i]; switch ($ObjectToArray['idType']) { case 1: $countRuWords[$ObjectToArray['Dan']]=(int)$ObjectToArray['Broj']; break; case 2: $countUWords[$ObjectToArray['Dan']]=(int)$ObjectToArray['Broj']; break; case 3: $countIWords[$ObjectToArray['Dan']]=(int)$ObjectToArray['Broj'];

15

break; case 4: $countNaWords[$ObjectToArray['Dan']]=(int)$ObjectToArray['Broj']; break; } $i++;

}

//Final step $nizU=$this->getFinalWordsArray($countUWords,$nizDana); $nizRu=$this->getFinalWordsArray($countRuWords,$nizDana); $nizI=$this->getFinalWordsArray($countIWords,$nizDana); $nizNa=$this->getFinalWordsArray($countNaWords,$nizDana); $nizKanji=$this->getFinalWordsArray($countKanji,$nizDana);

$finalDataCount=array( array('name'=>'U verbs','data'=>$nizU),array('name'=>'Ru verbs','data'=>$nizRu),array('name'=>'I adjectives','data'=>$nizI),array('name'=>'Na adjectives','data'=>$nizNa),array('name'=>'Kanji','data'=>$nizKanji) ); $jsonNumbers=json_encode($finalDataCount);

$jsonDays =json_encode($nizDana);return ['jsonNumbers'=>$jsonNumbers,'jsonDays'=>$jsonDays];

}private function getFinalWordsArray($array,$nizDana){

$finalArray=array(); foreach ($array as $key => $value) { for ($i=0; $i < count($nizDana); $i++) { if($key==$i+1){ $finalArray[$i]=$value; } else{ if(!isset($finalArray[$i])){ $finalArray[$i]=0; } } } }

return $finalArray;}private function getCountKanji($month=null,$year=null){

if($month==null){

16

$month=date("m");

}if($year==null){

$year=date("Y");}$CountKanjis=DB::select("SELECT count(id) as 'Broj' FROM `kanjis` WHERE

YEAR(created_at)='$year' && MONTH(created_at) ='$month'");return $CountKanjis[0]->Broj;

}private function getCountWords($month=null,$year=null){

if($month==null){$month=date("m");

}if($year==null){

$year=date("Y");}$countWords=DB::select("SELECT count(id) as 'Broj' FROM `Words` WHERE

YEAR(created_at)='$year' && MONTH(created_at) ='$month'");

return $countWords[0]->Broj;}

}

4.3 KanjiController<?php

namespace App\Http\Controllers;use Illuminate\Http\Request;use Illuminate\Support\Facades\Response;use App\Kanji;use App\KanjiLevel;

use Illuminate\Pagination\Paginator;use Illuminate\Pagination\LengthAwarePaginator;

class KanjiController extends BaseController{

public function getKanjis(){$kanjisEverything=Kanji::where('level_id','5')->orderBy('id','desc')->get();$i=0;foreach($kanjisEverything as $k){

$kanjis[$i]=array('meaning'=>$this->splitAndTrim($k['meaning'],0),'other_readings'=>$this->splitAndTrim($k['other_readings'],1),'main_reading'=>$this->splitAndTrim($k['main_reading'],0),

17

'kanji_writing'=>$k['kanji_writing'],'level_name'=>$k->kanjiLevel->name);

$i++;}if(count($kanjisEverything)==0){

$kanjis=null;return view('frontend.kanji',['kanjis'=>$kanjis]);

}$kanjis=$this->paginate($kanjis,15);

return view('frontend.kanji',['kanjis'=>$kanjis]);}public function getConvert(){

ob_start();

$pdf = new \FPDF_Protection();

$pdf->SetProtection(array('print'));$pdf->AddPage('P','A4');$pdf->SetXY( 75, 0 );$pdf->SetFont('Arial','',20);$pdf->Write(50,'Kanji :');$pdf->SetXY( 10, 45 );

$pdf->SetFont('Arial','',10);$pdf->SetFillColor(128,128,128);$pdf->SetTextColor(255);$pdf->SetDrawColor(92,92,92);$pdf->SetLineWidth(.3);

$pdf->Cell(10,7,"Kanji",1,0,'C',true);$pdf->Cell(30,7,"On’yomi",1,0,'C',true);$pdf->Cell(60,7,"Kun’yomi",1,0,'C',true);$pdf->Cell(60,7,"Meaning",1,0,'C',true);$pdf->Cell(20,7,"JLPT level",1,0,'C',true);$pdf->Ln();$pdf->SetFillColor(224,235,255);$pdf->SetTextColor(0);$pdf->SetFont('');$fill = false;$i=0;$j=0;$max =25;$kanjiznak=iconv("UTF-8", "ISO-8859-1", "s");

18

while($j<100){

if($i==$max){

$pdf->Cell(180,0,'','T');$pdf->AddPage('P','A4');$pdf->SetXY( 10, 20 );$pdf->SetFont('Arial','',10);$pdf->SetFillColor(128,128,128);$pdf->SetTextColor(255);$pdf->SetDrawColor(92,92,92);$pdf->SetLineWidth(.3);$pdf->Cell(10,7,"Kanji",1,0,'C',true);$pdf->Cell(30,7,"On’yomi:",1,0,'C',true);$pdf->Cell(60,7,"Kun’yomi",1,0,'C',true);$pdf->Cell(60,7,"Meaning",1,0,'C',true);$pdf->Cell(20,7,"JLPT level",1,0,'C',true);$pdf->Ln();$pdf->SetFillColor(224,235,255);$pdf->SetTextColor(0);$pdf->SetFont('');$fill = false;$i=0;$j++;

}$pdf->SetFont('Times','');$pdf->Cell(10,6,$kanjiznak,'LR',0,'L',$fill);$pdf->Cell(30,6,'ダン, ナン','LR',0,'L',$fill);$pdf->Cell(60,6,'おとこ, お','LR',0,'L',$fill);$pdf->Cell(60,6,'half, middle, odd number, semi-,

part-','LR',0,'L',$fill);$pdf->Cell(20,6,'N5','LR',0,'L',$fill);$pdf->Ln();$fill =! $fill;$i++;$j++;

}$pdf->Cell(180,0,'','T');

return Response::make($pdf->Output("Kanji"."-"."N5".".pdf",'I'), 200, [ 'Content-Type' => 'application/pdf',

19

]);

}

//paginate arraypublic function paginate($items,$perPage)

{ $pageStart = \Request::get('page', 1); $offSet = ($pageStart * $perPage) - $perPage; $itemsForCurrentPage = array_slice($items, $offSet, $perPage, true); return new LengthAwarePaginator($itemsForCurrentPage, count($items),$perPage,Paginator::resolveCurrentPage(), array('path' => Paginator::resolveCurrentPath())); }}

4.4 WordController

<?php

namespace App\Http\Controllers;use Illuminate\Http\Request;use Illuminate\Support\Facades\Response;use App\Word;use App\Category;

class WordController extends BaseController{

public function postAjaxGetConjugation(Request $request){$word=$request['wordConj'];$idCategory=$request['categoryId'];$conjArray=$this->getConjugations($word,$idCategory);return response()->json($conjArray);

}public function getWords(){

$oneWord=Word::get();if(count($oneWord)==0){

return view('frontend.words',['categories'=>null,'words'=>null]);}$wordWord=$oneWord[0]->word;$wordCategory=$oneWord[0]->category_id;

$wordsEverything = Word::orderBy('updated_at','desc')->get();$categories = Category::get();$i=0;foreach($wordsEverything as $w){

20

if($w['kanji_reading'] == ''){$kanji_reading='Not yet added';$bolded='';

}else{

$kanji_reading=$w['kanji_reading'];$bolded='bolded';

}$words[$i]=array(

'category_id'=>$w->category_id,'word'=>$w->word,'translation'=>$this->splitAndTrim($w['translation'],0),'kanji_reading'=>$kanji_reading,'bolded'=>$bolded);

$i++;}

return view('frontend.words',['categories'=>$categories,'words'=>$words]);}private function getConjugations($word,$idCategory){

$lastLetter=mb_substr($word,-1);$beforeLastLetter=mb_substr($word, 0, -1);switch($idCategory){

case 4: $conjugationArray=array('PresentPositive'=>$word.'です','PresentNegative'=>$word.'じゃありません','PastPositive'=>$word.'でした','PastNegative'=>$word.'じゃありませんでした','Te-Form'=>$word.'で','PresentShortPositive'=>$word.'だ','PresentShortNegative'=>$word.'じゃない','PastShortPositive'=>$word.'だった','PastShortNegative'=>$word.'じゃなかった');break;

case 3:$conjugationArray=array('PresentPositive'=>$word.'です','PresentNegative'=>$beforeLastLetter.'くありません','PastPositive'=>$beforeLastLetter.'かったです','PastNegative'=>$beforeLastLetter.'くありませんでした','Te-Form'=>$beforeLastLetter.'くて','PresentShortPositive'=>$word,'PresentShortNegative'=>$beforeLastLetter.'くない','PastShortPositive'=>$beforeLastLetter.'かった','PastShortNegative'=>$beforeLastLetter.'くなかった');break;

case 1:$conjugationArray=array('PresentPositive'=>$beforeLastLetter.'ます','PresentNegative'=>$beforeLastLetter.'ません','PastPositive'=>$beforeLastLetter.'ました','PastNegative'=>$beforeLastLetter.'ませんでした','Te-Form'=>$beforeLastLetter.'て','PresentShortPositive'=>$word,'PresentShortNegative'=>$beforeLastLetter.'ない','PastShortPositive'=>$beforeLastLetter.'た','PastShortNegative'=>$beforeLastLetter.'なかった','stem'=>$beforeLastLetter,'PresentProgressivePositive'=>$beforeLastLetter.'ています','PresentProgressiveNegative'=>$beforeLastLetter.'ていません');break;

case 2: switch ($lastLetter) {case 'う':

21

$stem=$beforeLastLetter.'い';$teForm = $beforeLastLetter.'って';$PresentPositive=$beforeLastLetter.'います';$PresentNegative=$beforeLastLetter.'いません';$PastPositive=$beforeLastLetter.'いました';$PastNegative=$beforeLastLetter.'いませんでし

た';$PresentShortPositive=$word;$PresentShortNegative=$beforeLastLetter.'わない';$PastShortPositive= $beforeLastLetter.'った';$PastShortNegative=$beforeLastLetter.'わなかっ

た';$PresentProgressivePositive= $teForm.'います';$PresentProgressiveNegative=$teForm.'いません';break;

case 'つ':$stem=$beforeLastLetter.'ち';$teForm = $beforeLastLetter.'って';$PresentPositive=$beforeLastLetter.'ちます';$PresentNegative=$beforeLastLetter.'ちません';$PastPositive=$beforeLastLetter.'ちました';$PastNegative=$beforeLastLetter.'ちませんでし

た';$PresentShortPositive=$word;$PresentShortNegative=$beforeLastLetter.'たない';$PastShortPositive= $beforeLastLetter.'った';$PastShortNegative=$beforeLastLetter.'たなかっ


case 'る':$stem=$beforeLastLetter.'り';$teForm = $beforeLastLetter.'って';$PresentPositive=$beforeLastLetter.'ります';$PresentNegative=$beforeLastLetter.'りません';$PastPositive=$beforeLastLetter.'りました';$PastNegative=$beforeLastLetter.'りませんでし

た';$PresentShortPositive=$word;$PresentShortNegative=$beforeLastLetter.'らない';$PastShortPositive= $beforeLastLetter.'った';$PastShortNegative=$beforeLastLetter.'らなかっ

た';$PresentProgressivePositive= $teForm.'います';$PresentProgressiveNegative=$teForm.'いません';

22

break;case 'む':

$stem=$beforeLastLetter.'み';$teForm = $beforeLastLetter.'んで';$PresentPositive=$beforeLastLetter.'みます';$PresentNegative=$beforeLastLetter.'みません';$PastPositive=$beforeLastLetter.'みました';$PastNegative=$beforeLastLetter.'みませんでし

た';$PresentShortPositive=$word;$PresentShortNegative=$beforeLastLetter.'まない';$PastShortPositive= $beforeLastLetter.'んだ';$PastShortNegative=$beforeLastLetter.'まなかっ


case 'ぶ':$stem=$beforeLastLetter.'び';$teForm = $beforeLastLetter.'んで';$PresentPositive=$beforeLastLetter.'びます';$PresentNegative=$beforeLastLetter.'びません';$PastPositive=$beforeLastLetter.'びました';$PastNegative=$beforeLastLetter.'びませんでし

た';$PresentShortPositive=$word;$PresentShortNegative=$beforeLastLetter.'ばない';$PastShortPositive= $beforeLastLetter.'んだ';$PastShortNegative=$beforeLastLetter.'ばなかっ


case 'ぬ':$stem=$beforeLastLetter.'に';$teForm = $beforeLastLetter.'んで';$PresentPositive=$beforeLastLetter.'にます';$PresentNegative=$beforeLastLetter.'にません';$PastPositive=$beforeLastLetter.'にました';$PastNegative=$beforeLastLetter.'にませんでし

た';$PresentShortPositive=$word;$PresentShortNegative=$beforeLastLetter.'なない';$PastShortPositive= $beforeLastLetter.'んだ';$PastShortNegative=$beforeLastLetter.'ななかっ

た';

23

$PresentProgressivePositive= $teForm.'います';$PresentProgressiveNegative=$teForm.'いません';break;

case 'く':$stem=$beforeLastLetter.'き';$teForm = $beforeLastLetter.'いて';$PresentPositive=$beforeLastLetter.'きます';$PresentNegative=$beforeLastLetter.'きません';$PastPositive=$beforeLastLetter.'きました';$PastNegative=$beforeLastLetter.'きませんでした';$PresentShortPositive=$word;$PresentShortNegative=$beforeLastLetter.'かない';$PastShortPositive= $beforeLastLetter.'いた';$PastShortNegative=$beforeLastLetter.'かなかった';$PresentProgressivePositive= $teForm.'います';$PresentProgressiveNegative=$teForm.'いません';break;

case 'ぐ':$stem=$beforeLastLetter.'ぎ';$teForm = $beforeLastLetter.'いで';$PresentPositive=$beforeLastLetter.'ぎます';$PresentNegative=$beforeLastLetter.'ぎません';$PastPositive=$beforeLastLetter.'ぎました';$PastNegative=$beforeLastLetter.'ぎませんでした';$PresentShortPositive=$word;$PresentShortNegative=$beforeLastLetter.'がない';$PastShortPositive= $beforeLastLetter.'いだ';$PastShortNegative=$beforeLastLetter.'がなかった';$PresentProgressivePositive= $teForm.'います';$PresentProgressiveNegative=$teForm.'いません';break;

case 'す':$stem=$beforeLastLetter.'し';$teForm = $beforeLastLetter.'して';$PresentPositive=$beforeLastLetter.'します';$PresentNegative=$beforeLastLetter.'しません';$PastPositive=$beforeLastLetter.'しました';$PastNegative=$beforeLastLetter.'しませんでした';$PresentShortPositive=$word;$PresentShortNegative=$beforeLastLetter.'さない';$PastShortPositive= $beforeLastLetter.'した';$PastShortNegative=$beforeLastLetter.'さなかった';$PresentProgressivePositive= $teForm.'います';$PresentProgressiveNegative=$teForm.'いません';break;

default:break;

24

}

$conjugationArray=array('PresentPositive'=>$PresentPositive,'PresentNegative'=>$PresentNegative,'PastPositive'=>$PastPositive,'PastNegative'=>$PastNegative,'Te-Form'=>$teForm,'PresentShortPositive'=>$PresentShortPositive,'PresentShortNegative'=>$PresentShortNegative,'PastShortPositive'=>$PastShortPositive,'PastShortNegative'=>$PastShortNegative,'stem'=>$stem,'PresentProgressivePositive'=>$PresentProgressivePositive,'PresentProgressiveNegative'=>$PresentProgressiveNegative);break;

default:die('yaas');}return $conjugationArray;

}}

4.5 BaseController

<?php

namespace App\Http\Controllers;

class BaseController extends Controller{

//make separation after, and remove spacesprotected function splitAndTrim($word,$number){

$wordsArray = explode(",",$word);if($number==1){

$finalWords = "";$extendedArray=array();for($i=0;$i<count($wordsArray);$i++){

if(strpos($wordsArray[$i], '-') !== false){

$extSplit = explode("-",$wordsArray[$i]);$extendedArray[$extSplit['0']]=$extSplit['1'];// print_r(strpos($wordsArray[$i], '-'));die;

}else{

$extendedArray[$wordsArray[$i]]='';// if($i==count($wordsArray)-1){// $finalWords .= $wordsArray[$i];// }// else{// $finalWords .= $wordsArray[$i].", ";// }

}}

25

return $extendedArray;}else{$finalWords=implode(", ",$wordsArray);// $finalWords = "";// for($i=0;$i<count($wordsArray);$i++){// if($i==count($wordsArray)-1){// $finalWords .= $wordsArray[$i];// }// else{// $finalWords .= $wordsArray[$i].", ";// }// }// print_r($finalWords);die;return $finalWords;}

}}

4.6 AdminController

<?php

namespace App\Http\Controllers;use Illuminate\Http\Request;use App\Word;use App\Category;use App\Kanji;use Illuminate\Support\Facades\Auth;

class AdminController extends Controller{

public function getIndex(){return view('admin.uploadEverything');

}public function getLogin(){

return view('admin.login');}public function postLogin(Request $request){

$this->validate($request,['email'=>'required|email','password'=>'required']);

if(!Auth::attempt(['email'=>$request['email'],'password'=>$request['password']])){

return redirect()->back()->with(['fail'=>'Wrong combination']);

26

}return redirect()->route('admin.uploadEverything');

}public function getLogout(){

Auth::logout();return redirect()->route('frontend.index');

}public function postUpload(Request $request){

$tmpNameWords= $request->file('fileToUpload');$tmpNameKanji= $request->file('kanjiToUpload');if(isset($tmpNameWords)){

// $extension = $tmpName->extension();// print_r($extension);die;// print_r($tmpName->path());die;// $tmpName = $request->file('fileToUpload');

// File::get($request['fileToUpload']);$csv_array = array_map('str_getcsv',file($tmpNameWords->path()));

// print_r($csv_array);die();foreach ($csv_array as $oneByone) {

if(!isset($oneByone[1]) || !isset($oneByone[2]) || !isset($oneByone[3]) || !isset($oneByone[4]) || !isset($oneByone[5])){

return view('errors.503');}

$kana=$oneByone[1]; $kanji=$oneByone[2]; $translation=$oneByone[4]; $category=$this->switchToCategoryIndex($oneByone[5]); $datum=$oneByone[3];

$datum=date("Y-m-d",strtotime($datum));foreach (Word::where(['word'=>$kana,'translation'=>$translation,

['updated_at','!=',$datum]])->cursor() as $wordToUpdate) {

$wordToUpdate->word=$kana;$wordToUpdate->updated_at=$datum;$wordToUpdate->kanji_reading=$kanji;$wordToUpdate->translation=$translation;$wordToUpdate->category_id=$category;// if($wordToUpdate->update()){

27

// }// else{// die('Nije uspelo');// } // print_r($wordToUpdate);die();

}// \Event::listen('Illuminate\Database\Events\QueryExecuted',

function ($query) {// var_dump($query->sql);// var_dump($query->bindings);// var_dump($query->time);// });if(Word::where(['word'=>$kana,'translation'=>$translation])-

>first()){}else{

$word=new Word(); $word->created_at=$datum; $word->updated_at=$datum; $word->word=$kana; $word->kanji_reading=$kanji; $word->translation=$translation; $word->category_id=$category; $word->save();

}

}}if(isset($tmpNameKanji)){

$csv_array = array_map('str_getcsv',file($tmpNameKanji->path()));foreach ($csv_array as $oneByone) { if(!isset($oneByone[1]) || !isset($oneByone[2]) || !isset($oneByone[3]) ||

!isset($oneByone[4]) || !isset($oneByone[5]) || !isset($oneByone[6])){return view('errors.503');

} $kanji_writing=$oneByone[1]; $main_reading=$oneByone[4]; $other_readings=$oneByone[5]; $level=$this->switchToKanjiLevel($oneByone[6]); $datum=$oneByone[3];

$datum=date("Y-m-d",strtotime($datum));$meaning=$oneByone[2];

28

foreach (Kanji::where(['kanji_writing'=>$kanji_writing,'main_reading'=>$main_reading,['updated_at','!=',$datum]])->cursor() as $kanjiToUpdate)

{

$kanjiToUpdate->kanji_writing=$kanji_writing;$kanjiToUpdate->updated_at=$datum;$kanjiToUpdate->main_reading=$main_reading;$kanjiToUpdate->other_readings=$other_readings;$kanjiToUpdate->meaning=$meaning;$kanjiToUpdate->level_id=$level;$kanjiToUpdate->update();

}if(Kanji::where(['kanji_writing'=>$kanji_writing])->first()){}else{

$kanji=new Kanji(); $kanji->created_at=$datum; $kanji->updated_at=$datum; $kanji->level_id=$level; $kanji->kanji_writing=$kanji_writing; $kanji->main_reading=$main_reading; $kanji->other_readings=$other_readings; $kanji->meaning=$meaning; $kanji->save();

}

}}

return redirect()->route('frontend.charts');}

private function switchToCategoryIndex($string){$newString = strtolower($string);switch($newString){

case 'i' : $category_id=3;break;case "na" : $category_id=4;break;case "u" : $category_id=2;break;case "ru": $category_id=1;break;default: $category_id=2;break;

}return $category_id;

}private function switchToKanjiLevel($string){

29

switch($string){case 'N5' : $level_id=5;break;case "N4" : $level_id=4;break;case "N3" : $level_id=3;break;case "N2": $level_id=2;break;case "N1": $level_id=1;break;default: $level_id=5;break;

}return $level_id;

}}

4.7 AboutMeController

<?php

namespace App\Http\Controllers;use Illuminate\Http\Request;use Illuminate\Support\Facades\Response;use App\Events\MessageSent;use Illuminate\Support\Facades\Event;

class AboutMeController extends Controller{

public function getIndex(){return view('frontend.aboutme');

}public function postSendMessage(Request $request){

$this->validate($request,['email'=>'required|email','name'=>'required|max:40|alpha','subject'=>'required|max:20|alpha','message'=>'required|min:10']);

Event::fire(new MessageSent($request->name,$request->subject,$request->email,$request->message));

return redirect()->route('frontend.aboutme')->with(['success'=>'Sent! Wohooo!']);}

}

4.8 Models

4.8.1 Admin

30

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;use Illuminate\Auth\Authenticatable;

class Admin extends Model implements \Illuminate\Contracts\Auth\Authenticatable{ use Authenticatable;}

4.8.2 Kanji

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Kanji extends Model{ public function kanjilevel(){ return $this->belongsTo('App\KanjiLevel','level_id'); }}

4.8.3 KanjiLevel

<?php

namespace App;


class KanjiLevel extends Model{ public function kanjis(){ return $this->hasMany('App\Kanji','level_id'); }}

4.8.4 Word

31

<?php

namespace App;


class Word extends Model{ public function categories(){ return $this->belongsTo('App\Category'); }

protected $dateFormat = 'Y-m-d';}

4.8.5 Category

<?php

namespace App;


class Category extends Model{ public function words(){ return $this->hasMany('App\Word'); }}

4.9 Views

4.9.1 layouts/master

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Welcome to Sinbad Japanese! Your Japanese learning website. See your progress, list learned words, play games!"> <meta name="author" content="Radumilo Dimitrijevic"> <meta name="keywords" content="Japanese,Kanji,Words,On’yomi,Kun’yomi"> <title>@yield('title')</title>

32

<div class="row"> <div class="col-sm-6"> All Rights Reserved. </div> <div class="col-sm-6"> <ul class="pull-right"> <li><a href="{{route('frontend.index')}}">Home</a></li> <li><a href="{{route('frontend.aboutme')}}">About me</a></li> <li><a href="{{route('frontend.charts')}}">Chart</a></li> <li><a id="gototop" class="gototop" href="#"><i class="fa fa-chevron-up"></i></a></li> </ul> </div> </div> </div> </footer>

4.9.3 includes/header

<header class="navbar navbar-inverse navbar-fixed-top wet-asphalt" role="banner"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="{{route('frontend.index')}}"><img src="{{URL::to('images/logo.png')}}" alt="logo"></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="{{ URL::route('frontend.index') === URL::current() ? 'active' : '' }}"><a href="{{route('frontend.index')}}">Home</a></li> <li class="{{ URL::route('frontend.aboutme') === URL::current() ? 'active' : '' }}"><a href="{{route('frontend.aboutme')}}">About me</a></li> <li class="{{ URL::route('frontend.charts') === URL::current() ? 'active' : '' }}"><a href="{{route('frontend.charts')}}">Chart</a></li> <li class="{{ URL::route('frontend.words') === URL::current() ? 'active' : '' }}"><a href="{{route('frontend.words')}}">All words</a></li> <li class="{{ URL::route('frontend.kanjis') === URL::current() ? 'active' : '' }}"><a href="{{route('frontend.kanjis')}}">Kanji</a></li> @if(Auth::check())

34

<li class="{{ URL::route('admin.uploadEverything') === URL::current() ? 'active' : '' }}"><a href="{{route('admin.uploadEverything')}}">Upload everything</a></li> <li><a href="{{route('admin.logout')}}">Logout</a></li> @endif </ul> </div> </div> </header>

4.9.4 frontend/aboutme

@extends('layouts.master')

@section('title') About me@stop@section('content') <div class="container "> <h1 class="AboutTitle hideMe">しょうかい</h1> <div class="row">

<div class="col-md-3 col-sm-3"> <img class="img-thumbnail img-responsive photo"

src="{{URL::to('images/ja.jpg')}}" width="300" height="300" /> </div> <div class="col-md-9 col-sm-9"> <p class="AboutFirstP hideMe"> 初めまして。Radmilo Dimitrijević です。数年間独学で日本語を勉強して

います。日本語で自己紹介をかいてみます。私はセルビア人で２２さいです。家族とベオグラードに住んでいます。お母さんは医師でお父さんはたいしょくしました。きょうだいがひとりいます。お兄さんは２９さいです。彼は仕事がありません。みなさんが私は私のお兄さんみたいだと思いますでも私はそうは思いません。私は学生です。専門はプログラミングです。いろいろなスポーツが好きですでもスポーツをみるのが好きじゃありません。ランニングと水泳好きですがラニングが上手じゃありませんそして水泳は高いです。ランニングもしにくいです。私はバスケットボールがいちばん好きです。運動するのがとても大事と思いますから一週間に四回ぐらい運動します。食べることが大好きですしちょっとふとっています。子供の時チェスをしました。とくいでしたからいろいろなところに行ったことがあります。旅行をするのが好きです。お金がありませんけど。アニメの大ファンです。アニメのおかげで日本語に興味を持つようになりました。音楽を聞くのを楽しみます。好きな音楽のジャンルがありません。すべてのが好きです。勉強しながら、大抵おんがくをききます。

</p>

35

<h3 class="AboutPlans hideMe">私の将来の計画</h3> <p class="AboutPlansP hideMe"> まず日本語をならうつもりです。大学をそつぎょうしてから仕事を見つ

けるつもりです。十分なお金をかせいでからせかいをたびするつもりです。どうぶつが大好きなので、どうぶつとはたらきたいです。

</p> <h3 class="AboutWhyJapanese hideMe">どして日本語</h3> <p class="AboutWhyJapaneseP hideMe"> 言語を学ぶことは、つねにわたしのじょうねつとなっています。日本語

をまなべば、ほかのことなんでも学べると思いました。さらに日本語の勉強は楽しです。

</p> <a class="btn btn-success translate" data-id="eng">Translate</a> </div></div><hr>

<div class="row"> <div class="col-sm-12"> <h4>Contact Form</h4> <form action="{{route('contact.send')}}" method="post" id="contact-form"> <div class="row"> <div class="col-sm-5"> <div class="form-group"> <input type="text" class="form-control" id="name" name="name" placeholder="Name" value="{{Request::old('name')}}"> </div> <div class="form-group"> <input type="text" class="form-control" id="email" name="email" placeholder="Email address" value="{{Request::old('email')}}"> </div> <div class="form-group"> <input type="text" class="form-control errorRed" id="subject" name="subject" placeholder="Subject" value="{{Request::old('subject')}}"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-lg disabled">Send Message</button> </div> </div> <div class="col-sm-7"> <textarea name="message" id="message" class="form-control" rows="8" placeholder="Message" >{{Request::old('message')}}</textarea>

36

<input type="hidden" value="{{Session::token()}}" name="_token"/> </div> </div> </form> @if(count($errors)>0)

<section class="info-box fail">

<ul>@foreach($errors->all() as $error)

<li>{{$error}}</li>@endforeach

</ul>

</section>@endif@if(Session::has('success'))

<section class="info-box success">

{{Session::get('success')}}

</section>@endif

</div> </div></div>

@stop@section('scripts') <script type="text/javascript"> var token="{{ Session::token() }}"; </script> <script src="{{URL::to('src/js/aboutme.js')}}"></script>@stop

4.9.5 frontend/chart


@section('title') Charts@stop@section('styles') <style type="text/css">

37

${demo.css} </style> <link href="{{URL::to('src/css/myStyle.css')}}" rel="stylesheet"> <script src="{{URL::to('src/js/highcharts.js')}}"></script> <script src="{{URL::to('src/js/exporting.js')}}"></script> <script type="text/javascript"> $(function () { $('#container').highcharts({ chart: { type: 'column' }, title: { text: "Word count in <?php echo date('F');?>" }, subtitle: { text: 'Source: Pele baza' }, xAxis: { categories: <?php echo $jsonDays;?>, crosshair: true }, yAxis: { min: 0, title: { text: 'Reci (number)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: <?php echo $jsonNumbers;?> }); });

38

</script>@stop@section('content') <section class="chartMargin no-margin "> <div class="container"> <div class="input-group"> <input type="button" value="Column type chart" name="typeChart" class="check btn btn-info" data-id="column"> <input type="button" value="Line type chart" name="typeChart" class="check btn btn-info" data-id="line"> <input type="hidden" id="allValuableData" data-typeChart="column" data-month="<?php echo date('m') ?>" data-year="<?php echo date('Y') ?>"/> </div> <br> <div > <?php if(isset($existingYears)){ foreach($existingYears as $year){ ?> <input type="button" value="<?php echo $year['Year']?>" name="year" class="check btn btn-info" data-id="<?php echo $year['Year']?>"> <?php } }?> </div> <br> <div class="input-group"> <?php if(isset($existingMonths)) { for($i=1;$i<=12;$i++) { $monthName = date("F", mktime(0, 0, 0, $i, 10)); if(in_array($monthName, $existingMonths)){ ?> <input type="button" value="<?php echo $monthName?>" name="month" class="check btn btn-info" data-id="<?php echo $i?>"> <?php } else { ?> <input type="button" value="<?php echo $monthName?>" name="month" class="check btn btn-warning" data-id="<?php echo $i?>"> <?php } } } ?> </div>

39

<br> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> <div class="text-center"> <p class="total">Total kanji: @if(isset($finalNumberKanjis)) <b>{{$finalNumberKanjis}}</b> @endif Total words: @if(isset($finalNumberWords)) <b>{{$finalNumberWords}}</b> @endif </p> </div> <br> </div> </section>@stop

@section('scripts') <script type="text/javascript"> var token="{{ Session::token() }}"; </script> <script src="{{URL::to('src/js/chartajax.js')}}"></script>@stop

4.9.6 frontend/index


@section('title') JapaneseCharts@stop@section('content')

<section id="main-slider" class="no-margin"> <div class="carousel slide wet-asphalt"> <ol class="carousel-indicators"> <li data-target="#main-slider" data-slide-to="0" class="active"></li> <li data-target="#main-slider" data-slide-to="1"></li> <li data-target="#main-slider" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active" style="background-image: url({{URL::to('images/1.jpg')}})"> <div class="container"> <div class="row">

40

<div class="col-sm-12"> <div class="carousel-content centered"> <h1 class="animation animated-item-1">Welcome to Sinbad Japanese</h1> <p class="animation animated-item-2">Your Japanese learning website. See your progress, list learned words, play games!</p> </div> </div> </div> </div> </div> <div class="item" style="background-image: url({{URL::to('images/2.jpg')}})"> </div> <div class="item" style="background-image: url({{URL::to('images/3.jpg')}})"> </div> </div> </div> <a class="prev hidden-xs" href="#main-slider" data-slide="prev"> <i class="fa fa-angle-left"></i> </a> <a class="next hidden-xs" href="#main-slider" data-slide="next"> <i class="fa fa-angle-right"></i> </a> </section>

<section id="services" class="emerald"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="media"> <div class="pull-left"> <i class="fa fa-list icon-md"></i> </div> <div class="media-body"> <h3 class="media-heading">List of learned words</h3> <p>List of learned words and kanji ordered by date, and conjugation for certain words</p> <a class="btn btn-success" href="{{route('frontend.words')}}">Learn More</a> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="media">

41

<div class="pull-left"> <i class="fa fa-bar-chart icon-md"></i> </div> <div class="media-body"> <h3 class="media-heading">Chart progress</h3> <p>See your progress for every day, month and year.</p> <a class="btn btn-success" href="{{route('frontend.charts')}}">Learn More</a> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="media"> <div class="pull-left"> <i class="fa fa-envelope icon-md"></i> </div> <div class="media-body"> <h3 class="media-heading">Contact us</h3> <p>Contact us if you are interesed in having your own tracking page!</p> <a class="btn btn-success" href="{{route('frontend.aboutme')}}">Learn More</a> </div> </div> </div> </div> </div> </section>

<section id="recent-works"> <div class="container"> <div class="row"> <div class="col-md-3"> <h3>Newest kanji</h3> <p>Latest kanji, if you are interested in seeing more click bellow</p> <a class="btn btn-success" href="{{route('frontend.kanjis')}}">Learn More</a> <div class="btn-group"> <a class="btn btn-danger" href="#scroller" data-slide="prev"><i class="fa fa-angle-left"></i></a> <a class="btn btn-danger" href="#scroller" data-slide="next"><i class="fa fa-angle-right"></i></a> </div> <p class="gap"></p> </div> <div class="col-md-9"> <div id="scroller" class="carousel slide"> <div class="carousel-inner">

42

<div class="item active"> <div class="row"> @if(isset($kanjis)) @php ($i = 0) @foreach($kanjis as $kanji)

@if($i<3) <div class="col-xs-4 nesto"> <div class="item-kanji">

<h3>{{$kanji['kanji_writing']}}</h3> <p>Meaning: {{$kanji['meaning']}}</p> <hr> <p>On’yomi: {{$kanji['main_reading']}}</p> <hr> <p>Kun’yomi: @php ($j = 0) @foreach($kanji['other_readings'] as $main => $suffix) @if($j == count($kanji['other_readings'])-1) {{$main}}<i>{{$suffix}}</i> @else {{$main}}<i>{{$suffix}}</i>, @endif @php ($j++) @endforeach </p> <hr> <p>JLPT level: {{$kanji['level_name']}}</p> </div> </div> @elseif($i == 3) </div> </div> <div class="item"> <div class="row"> <div class="col-xs-4"> <div class="item-kanji"> <h3>{{$kanji['kanji_writing']}}</h3> <p>Meaning: {{$kanji['meaning']}}</p> <hr> <p>On’yomi: {{$kanji['main_reading']}}</p> <hr> <p>Kun’yomi: @php ($j = 0)

43

@foreach($kanji['other_readings'] as $main => $suffix) @if($j == count($kanji['other_readings'])-1) {{$main}}<i>{{$suffix}}</i> @else {{$main}}<i>{{$suffix}}</i>, @endif @php ($j++) @endforeach </p> <hr> <p>JLPT level: {{$kanji['level_name']}}</p> </div> </div> @else <div class="col-xs-4"> <div class="item-kanji"> <h3>{{$kanji['kanji_writing']}}</h3> <p>Meaning: {{$kanji['meaning']}}</p> <hr> <p>On’yomi: {{$kanji['main_reading']}}</p> <hr> <p>Kun’yomi: @php ($j = 0) @foreach($kanji['other_readings'] as $main => $suffix) @if($j == count($kanji['other_readings'])-1) {{$main}}<i>{{$suffix}}</i> @else {{$main}}<i>{{$suffix}}</i>, @endif @php ($j++) @endforeach </p> <hr> <p>JLPT level: {{$kanji['level_name']}}</p> </div> </div> @endif @php ($i++)

@endforeach @endif </div> </div> </div> </div>

44

</div> </div> </div> </section>@stop

4.9.7 frontend/kanji


@section('title') Kanji@stop@section('content') <section id="portfolio" class="container"> @if(isset($kanjis)) <ul class="portfolio-items col-5"> @foreach($kanjis as $kanji) <li> <div class="item-kanji"> <h3>{{$kanji['kanji_writing']}}</h3> <p>Meaning: {{$kanji['meaning']}}</p> <hr> <p>On’yomi: {{$kanji['main_reading']}}</p> <hr> <p>Kun’yomi: @php ($j = 0) @foreach($kanji['other_readings'] as $main => $suffix) @if($j == count($kanji['other_readings'])-1) {{$main}}<i>{{$suffix}}</i> @else {{$main}}<i>{{$suffix}}</i>, @endif @php ($j++) @endforeach </p> <hr> <p>JLPT level: {{$kanji['level_name']}}</p> </div> @endforeach </li> </ul> <div class="text-center"> <?php $link_limit = 7; ?> @if ($kanjis->lastPage() > 1) <ul class="pagination">

45

<li class="{{ ($kanjis->currentPage() == 1) ? ' disabled' : '' }}"> <a href="{{ $kanjis->url(1) }}">First</a> </li> @for ($i = 1; $i <= $kanjis->lastPage(); $i++) <?php $half_total_links = floor($link_limit / 2); $from = $kanjis->currentPage() - $half_total_links; $to = $kanjis->currentPage() + $half_total_links; if ($kanjis->currentPage() < $half_total_links) { $to += $half_total_links - $kanjis->currentPage(); } if ($kanjis->lastPage() - $kanjis->currentPage() < $half_total_links) { $from -= $half_total_links - ($kanjis->lastPage() - $kanjis->currentPage()) - 1; } ?> @if ($from < $i && $i < $to) <li class="{{ ($kanjis->currentPage() == $i) ? ' active' : '' }}"> <a href="{{ $kanjis->url($i) }}">{{ $i }}</a> </li> @endif @endfor <li class="{{ ($kanjis->currentPage() == $kanjis->lastPage()) ? ' disabled' : '' }}"> <a href="{{ $kanjis->url($kanjis->lastPage()) }}">Last</a> </li> </ul> @endif </div> @endif </section> <a class="btn btn-success" href="{{route('frontend.convertPdf')}}">Convert</a>@stop

@section('scripts') <script type="text/javascript"> var token="{{ Session::token() }}"; </script>@stop

4.9.8 frontend/words


@section('title') Words

46

@stop@section('content') <section id="portfolio" class="container">

<ul class="portfolio-filter"> <li><a class="btn btn-default active all" href="#" data-filter="*">Latest</a></li> @if(isset($categories)) @foreach($categories as $category) <li><a class="btn btn-default category" href="#" data-filter=".id{{$category->id}}">{{$category->name}}</a></li> @endforeach @endif  </ul>

<ul class="portfolio-items col-5"> @if(isset($words)) @php ($i=0) @foreach($words as $word) @if($i>19) <li class="id{{$word['category_id']}} apps hidden1"> <div class="item-words"> <h3 data-categoryid="{{$word['category_id']}}">{{$word['word']}}</h3> <p>Translation: <i>{{$word['translation']}}</i></p> <hr> <p>Kanji writing: <span class="{{$word['bolded']}}">{{($word['kanji_reading'] == '') ? 'Not yet' : $word['kanji_reading']}}</span></p> </div> </li> @else <li class="id{{$word['category_id']}} apps waypoints"> <div class="item-words"> <h3 data-categoryid="{{$word['category_id']}}">{{$word['word']}}</h3> <p>Translation: <i>{{$word['translation']}}</i></p> <hr> <p>Kanji writing: <span class="{{$word['bolded']}}">{{($word['kanji_reading'] == '') ? 'Not yet' : $word['kanji_reading']}}</span></p> </div> </li>

47

@endif @php ($i++) @endforeach @endif </ul> </section> <div class='proba'> </div>@stop

@section('scripts') <script type="text/javascript"> var token="{{ Session::token() }}"; </script> <script src="{{URL::to('src/js/words.js')}}"></script> @stop

4.9.9 admin/login


@section('title') Admin Panel@stop@section('content')

<div class="container"><div class="row">

<div class="col-sm-12"> <h2>Contact Form</h2> <form action="{{route('admin.login')}}" method="post" id="contact-form"> <div class="row"> <div class="col-sm-5"> <div class="form-group"> <input type="text" class="form-control" id="email" name="email" placeholder="Email"> </div> <div class="form-group"> <input type="password" class="form-control" id="password" name="password" placeholder="Your password"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">Login</button> </div>

48

</div> <input type="hidden" value="{{Session::token()}}" name="_token"/> </div> </form> @if(count($errors)>0)

<section class="info-box fail"><ul>

@foreach($errors->all() as $error)<li>{{$error}}</li>

@endforeach</ul>

</section>@endif@if(Session::has('fail'))

<section class="info-box fail">{{Session::get('fail')}}

</section>@endif

</div> </div>

</div>@stop

4.9.10 admin/uploadEverything


@section('title') Admin Panel@stop@section('content') <div class="container"> <div class="row"> <div class="col-sm-12"> <h2>Insert CSV Files</h2> <form action="{{route('admin.upload')}}" method="post" files="true" enctype="multipart/form-data"> <div class="row"> <div class="col-sm-5"> <div class="form-group"> <label for="File">Words to upload</label> <input type="file" name="fileToUpload" id="fileToUpload" class="form-control"/> </div> <div class="form-group"> <label for="File">Kanji</label>

49

<input type="file" name="kanjiToUpload" id="kanjiToUpload" class="form-control"/> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> <input type="hidden" name="_token" value="{{Session::token()}}"/> </div> </form> </div> </div> </div>@stop

4.10 Javascript

4.10.1 chartAjax.js

$(document).ready(function(){ $(".check").click(function(e){ e.preventDefault(); var name=$(this).attr("name"); var numberOfMonth=''; var typeOfchart=''; var year=''; if(name=="month"){ numberOfMonth = $(this).data('id'); typeOfchart=$("#allValuableData").data('typechart'); year=$("#allValuableData").data('year'); } else if(name=="typeChart"){ typeOfchart=$(this).data("id"); numberOfMonth=$("#allValuableData").data('month'); year=$("#allValuableData").data('year'); } else{ year=$(this).data("id"); numberOfMonth=$("#allValuableData").data('month'); typeOfchart=$("#allValuableData").data('typechart'); } $.ajax({ type:"POST", url:baseUrl + "/ajaxRequest",

50

data:{monthNumber:numberOfMonth,chartType:typeOfchart,ClickedYear:year,_token:token} }).done(function(response) { // var allData=JSON.parse(response); // alert(allData); var jsonNumbers=response['everythingForChart']['jsonNumbers']; var jsonDays=response['everythingForChart']['jsonDays']; jsonDays=JSON.parse(jsonDays); jsonNumbers=JSON.parse(jsonNumbers); var month=response['monthNumber']; var monthName=response['monthName']; var chartType=response['chartType']; var monthName=response['monthName']; var totalWords=response['finalNumberWords']; var totalKanjis=response['finalNumberKanjis']; $('.total').html('Total kanji: <b>' + totalKanjis +'</b> Total words: <b>' + totalWords + '</b>'); var thisYear=response['thisYear']; var empty=true; for(i=0;i<jsonNumbers.length;i++){ if(jsonNumbers[i]['data']!=''){ empty=false; } } if(empty==true){ $("#container").html("<p>There is no data for " + monthName + " " + thisYear + "</p>"); $("#allValuableData").data('typechart',chartType); $("#allValuableData").data('month',month); $("#allValuableData").data('year',thisYear); return; } $("#allValuableData").data('typechart',chartType); $("#allValuableData").data('month',month); $("#allValuableData").data('year',thisYear); $('#container').highcharts ({ chart: { type: chartType }, title: { text: 'Word count for ' + monthName + ' ' + year }, subtitle: {

51

text: 'Source: Pele baza' }, xAxis: { categories: jsonDays, crosshair: true }, yAxis: { min: 0, title: { text: 'Reci (number)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: jsonNumbers }); }); }); });

4.10.2 main.js

jQuery(function($) {

//#main-slider$(function(){

$('#main-slider.carousel').carousel({interval: 8000

});});

$( '.centered' ).each(function( e ) {

52

$(this).css('margin-top', ($('#main-slider').height() - $(this).height())/2);});

$(window).resize(function(){$( '.centered' ).each(function( e ) {

$(this).css('margin-top', ($('#main-slider').height() - $(this).height())/2);});

});

//portfolio$(window).load(function(){

$portfolio_selectors = $('.portfolio-filter >li>a');if($portfolio_selectors!='undefined'){

$portfolio = $('.portfolio-items');$portfolio.isotope({

itemSelector : 'li',layoutMode : 'fitRows'

});$portfolio_selectors.on('click', function(){

$portfolio_selectors.removeClass('active');$(this).addClass('active');var selector = $(this).attr('data-filter');$portfolio.isotope({ filter: selector });return false;

});}

});

//contact formvar form = $('.contact-form');form.submit(function () {

$this = $(this);$.post($(this).attr('action'), function(data) {

$this.prev().text(data.message).fadeIn().delay(3000).fadeOut();},'json');return false;

});

//goto top$('.gototop').click(function(event) {

event.preventDefault();$('html, body').animate({

scrollTop: $("body").offset().top}, 500);

});

53

//Pretty Photo$("a[rel^='prettyPhoto']").prettyPhoto({

social_tools: false});

});

4.10.3 aboutMe.js

$(document).ready(function(){$('.translate').click(function(){

var lang=$(this).data('id');$('.hideMe').hide();if(lang=='eng'){

$(".row").css({ fontSize: 16});$('.AboutTitle').text('About Me');var aboutMe= "Welcome. I am Radmilo Dimitrijevic. I've been learning

Japanese for several years. I will try to write introduction in Japanese. I live in Belgrade with my family. My mother is a doctor and my father is retired. My brother is 29 and he doesn't have a job. I like a lot of different sports, but I do not like to watch. I like swimming and running, but I am not very good runner and swimming is expensive. Also running is hard. Basketball is my favourite sport. I think that exercise is very important, so I exercise around four times a week. But I love to eat so I am a bit overweight. When I was a child I used to play chess. I was good at it so I have been to many different places. I like to travel. But I do not have much money. I am a big fan of anime. Because of Anime I became interested in Japanese language. I enjoy listening to music. I do not have favourite genre of music, I like all genres";

$('.AboutFirstP').text(aboutMe);$('.AboutPlans').text('My future plans');$('.AboutPlansP').text('Firstly I intend to learn Japanese. After I finish

college, I intend to get a good job. After I earn enough money, I will travel around the world. Because I like animals, I would like to work with them.');

$('.AboutWhyJapanese').text('Why Japanese?');$('.AboutWhyJapaneseP').text('Well, learning languages has always been a

passion of mine. And i though if i could learn Japanese i could learn anything. Also learning Japanese is fun.');

$('.hideMe').fadeIn(800);$('.btn').data('id','jap');

}else if(lang=='jap'){

$(".row").css({ fontSize: 14});$('.AboutTitle').text('わたしについて');

54

$('.AboutFirstP').text('初めまして。Radmilo Dimitrijević です。数年間独学で日本語を勉強しています。日本語で自己紹介をかいてみます。私はセルビア人で２２さいです。家族とベオグラードに住んでいます。お母さんは医師でお父さんはたいしょくしました。きょうだいがひとりいます。お兄さんは２９さいです。彼は仕事がありません。みなさんが私は私のお兄さんみたいだと思いますでも私はそうは思いません。私は学生です。専門はプログラミングです。いろいろなスポーツが好きですでもスポーツをみるのが好きじゃありません。ランニングと水泳好きですがラニングが上手じゃありませんそして水泳は高いです。ランニングもしにくいです。私はバスケットボールがいちばん好きです。運動するのがとても大事と思いますから一週間に四回ぐらい運動します。食べることが大好きですしちょっとふとっています。子供の時チェスをしました。とくいでしたからいろいろなところに行ったことがあります。旅行をするのが好きです。お金がありませんけど。アニメの大ファンです。アニメのおかげで日本語に興味を持つようになりました。音楽を聞くのを楽しみます。好きな音楽のジャンルがありません。すべてのが好きです。勉強しながら、大抵おんがくをききます。');

$('.AboutPlans').text('私の将来の計画');$('.AboutPlansP').text('まず日本語をならうつもりです。大学をそつ

ぎょうしてから仕事を見つけるつもりです。十分なお金をかせいでからせかいをたびするつもりです。どうぶつが大好きなので、どうぶつとはたらきたいです。');

$('.AboutWhyJapanese').text('どして日本語');$('.AboutWhyJapaneseP').text('言語を学ぶことは、つねにわたしの

じょうねつとなっています。日本語をまなべば、ほかのことなんでも学べると思いました。さらに日本語の勉強は楽しです。');

$('.hideMe').fadeIn(800);$('.btn').data('id','eng');

}});

});

4.10.4 words.js

$(document).ready(function(){$('.proba').hide();$('.category').click(function(){

$('.hidden1').addClass('notHidden');$('.notHidden').removeClass('hidden1');

});$('.all').click(function(){

$('.notHidden').addClass('hidden1');$('.hidden1').removeClass('notHidden');

55

});var timeout;$('h3').hover(function(){

var word=$(this).text();var categoryId=$(this).data("categoryid");function explode(){ $.ajax({

type:"POST", url:baseUrl + "/ajaxGetConjugation", data:{wordConj:word,categoryId:categoryId,_token:token} }).done(function(response) { if(categoryId == 2 || categoryId == 1){ var dataTable="<div class='table-responsive'><table class='table table-

bordered table-condensed'><thead><th>Tense</th><th>Positive</th><th>Negative</th></thead><tr><td>Stem</td><td colspan='2'>"+response['stem']+"</td></tr><tr><td>Te form</td><td colspan='2'>"+response['Te-Form']+"</td></tr><tr><td>Present Indicative</td><td>"+response['PresentPositive']+"</td><td>"+response['PresentNegative']+"</td></tr><tr><td>Past Indicative</td><td>"+response['PastPositive']+"</td><td>"+response['PastNegative']+"</td></tr><tr><td>Present Progressive</td><td>"+response['PresentProgressivePositive']+"</td><td>"+response['PresentProgressiveNegative']+"</td></tr><tr><td>Present short</td><td>"+response['PresentShortPositive']+"</td><td>"+response['PresentShortNegative']+"</td></tr><tr><td>Past short</td><td>"+response['PastShortPositive']+"</td><td>"+response['PastShortNegative']+"</td></tr></table></div>";

} else{ var dataTable="<div class='table-

responsive'><table class='table table-bordered table-condensed'><thead><th>Tense</th><th>Positive</th><th>Negative</th></thead><tr><td>Te form</td><td colspan='2'>"+response['Te-Form']+"</td></tr><tr><td>Present Indicative</td><td>"+response['PresentPositive']+"</td><td>"+response['PresentNegative']+"</td></tr><tr><td>Past Indicative</td><td>"+response['PastPositive']+"</td><td>"+response['PastNegative']+"</td></tr><tr><td>Present short</td><td>"+response['PresentShortPositive']+"</td><td>"+response['PresentShortNegative']+"</td></tr><tr><td>Past short</td><td>"+response['PastShortPositive']+"</td><td>"+response['PastShortNegative']+"</td></tr></table></div>";

} $('.proba').empty();

$('.proba').append(dataTable);$('.proba').stop(true,true).fadeIn(800);

56

} ); } timeout=setTimeout(explode, 410);

},function(){

clearTimeout(timeout);$('.proba').stop(true,true).fadeOut(400);

// function explode(){$('.proba').empty();

// }// setTimeout(explode, 410);

});

// var proba = $(".waypoints:nth(5)");// proba.waypoint(function(){// alert('too');// $('.hidden1').addClass('notHidden');// $('.notHidden').removeClass('hidden1');

// });// $(window).scroll(function() {

// if ($(window).scrollTop() == $(document).height() - $(window).height()) { // $( ".hidden1" ).animate({// opacity: 1,// }, 5000, function() {// $('.hidden1').removeClass('hide1');// alert('too');// });// // function explode(){// // $('.hidden1').addClass('notHidden');

// // alert('too');// // } // // setTimeout(explode, 2000);// // $('.hidden1').css({// // "height":"auto",// // "width":"auto" // // }).animate(1000);

// }

57

// });// var waypoint = new Waypoint({// element: $(".waypoints:nth-of-type(5)"),// handler: function() {// $('.hidden1').addClass('notHidden');// $('.notHidden').removeClass('hidden1');// }// });

// $(window).on('scroll', function() { // var y_scroll_pos = window.pageYOffset; // var scroll_pos_test = $( window ).height(); // set to whatever you want it to be // if(y_scroll_pos > scroll_pos_test && $triggered_times == 0 ) { // //do your stuff over here // alert('Wohoo'); // $triggered_times = 1; // to make sure the above action triggers only once // } // });});

4.11 CSS

4.11.1 main.css

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);.clearfix { *zoom: 1;}.clearfix:before,.clearfix:after { display: table; content: ""; line-height: 0;}.clearfix:after { clear: both;}.hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0;}.input-block-level {

58

display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}body { padding-top: 80px; color: #34495e; background: #f5f5f5; font-family: 'Roboto', sans-serif; font-weight: 300;}h1,h2,h3,h4,h5,h6 { font-family: 'Roboto', sans-serif; font-weight: 400;}a { color: #34495e; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms;}hr { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #fff;}.btn { font-weight: 400;}.btn-transparent { border: 3px solid #fff; background: transparent; color: #fff;}.btn-transparent:hover { border-color: rgba(255, 255, 255, 0.5);}a:hover,

59

a:focus { color: #d9534f; text-decoration: none; outline: none;}.dropdown-menu { margin-top: -1px; min-width: 180px;}body > section { padding: 50px 0;}.turquoise,.green-sea,.sun-flower,.orange,.emerald,.nephrits,.carrot,.pumkin,.peter-river,.belize-hole,.alizarin,.pomegranate,.amethyst,.wisteria,.clouds .silver,.wet-asphalt,.midnight-blue,.concrete,.asbestos { color: #fff;}.turquoise h1,.green-sea h1,.sun-flower h1,.orange h1,.emerald h1,.nephrits h1,.carrot h1,.pumkin h1,.peter-river h1,.belize-hole h1,.alizarin h1,.pomegranate h1,.amethyst h1,

60

.wisteria h1,

.clouds .silver h1,

.wet-asphalt h1,

.midnight-blue h1,

.concrete h1,

.asbestos h1,

.turquoise h2,

.green-sea h2,

.sun-flower h2,

.orange h2,

.emerald h2,

.nephrits h2,

.carrot h2,

.pumkin h2,

.peter-river h2,

.belize-hole h2,

.alizarin h2,

.pomegranate h2,

.amethyst h2,

.wisteria h2,

.clouds .silver h2,

.wet-asphalt h2,

.midnight-blue h2,

.concrete h2,

.asbestos h2,

.turquoise h3,

.green-sea h3,

.sun-flower h3,

.orange h3,

.emerald h3,

.nephrits h3,

.carrot h3,

.pumkin h3,

.peter-river h3,

.belize-hole h3,

.alizarin h3,

.pomegranate h3,

.amethyst h3,

.wisteria h3,

.clouds .silver h3,

.wet-asphalt h3,

.midnight-blue h3,

.concrete h3,

.asbestos h3,

.turquoise h4,

.green-sea h4,

61

.sun-flower h4,

.orange h4,

.emerald h4,

.nephrits h4,

.carrot h4,

.pumkin h4,

.peter-river h4,

.belize-hole h4,

.alizarin h4,

.pomegranate h4,

.amethyst h4,

.wisteria h4,

.clouds .silver h4,

.wet-asphalt h4,

.midnight-blue h4,

.concrete h4,

.asbestos h4,

.turquoise h5,

.green-sea h5,

.sun-flower h5,

.orange h5,

.emerald h5,

.nephrits h5,

.carrot h5,

.pumkin h5,

.peter-river h5,

.belize-hole h5,

.alizarin h5,

.pomegranate h5,

.amethyst h5,

.wisteria h5,

.clouds .silver h5,

.wet-asphalt h5,

.midnight-blue h5,

.concrete h5,

.asbestos h5,

.turquoise h6,

.green-sea h6,

.sun-flower h6,

.orange h6,

.emerald h6,

.nephrits h6,

.carrot h6,

.pumkin h6,

.peter-river h6,

.belize-hole h6,

62

.alizarin h6,

.pomegranate h6,

.amethyst h6,

.wisteria h6,

.clouds .silver h6,

.wet-asphalt h6,

.midnight-blue h6,

.concrete h6,

.asbestos h6 { color: #fff;}.turquoise small,.green-sea small,.sun-flower small,.orange small,.emerald small,.nephrits small,.carrot small,.pumkin small,.peter-river small,.belize-hole small,.alizarin small,.pomegranate small,.amethyst small,.wisteria small,.clouds .silver small,.wet-asphalt small,.midnight-blue small,.concrete small,.asbestos small { color: rgba(255, 255, 255, 0.8);}.turquoise { background-color: #1abc9c;}.green-sea { background-color: #16a085;}.sun-flower { background-color: #f1c40f;}.orange { background-color: #f39c12;}.emerald { background-color: #2ecc71;

63

}.nephritis { background-color: #27ae60;}.carrot { background-color: #e67e22;}.pumkin { background-color: #d35400;}.peter-river { background-color: #3498db;}.belize-hole { background-color: #2980b9;}.alizarin { background-color: #e74c3c;}.pomegranate { background-color: #c0392b;}.amethyst { background-color: #9b59b6;}.wisteria { background-color: #8e44ad;}.clouds { background-color: #ecf0f1;}.silver { background-color: #bdc3c7;}.wet-asphalt { background-color: #34495e;}.wet-asphalt a:not(.btn) { color: #bdc3c7;}.wet-asphalt a:not(.btn):hover { color: #d9534f;}.midnight-blue { background-color: #2c3e50;}

64

.concrete { background-color: #95a5a6;}.asbestos { background-color: #7f8c8d;}.embed-container { position: relative; padding-bottom: 56.25%; /* 16/9 ratio */

padding-top: 30px; /* IE6 workaround*/

height: 0; overflow: hidden;}.embed-container iframe,.embed-container object,.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}#main-slider { position: relative;}#main-slider .carousel h2 { font-size: 36px;}#main-slider .carousel .btn { border: 3px solid rgba(255, 255, 255, 0.5); color: #fff; border-radius: 0; margin-top: 5px;}#main-slider .carousel .btn:hover { background-color: rgba(255, 255, 255, 0.3);}#main-slider .carousel .boxed { padding: 10px 15px; background-color: rgba(0, 0, 0, 0.8); display: inline-block;}

65

#main-slider .carousel .item { background-position: 50%; background-repeat: no-repeat; background-size: cover; left: 0 !important; opacity: 0; top: 0; position: absolute; width: 100%; display: block !important; height: 600px; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms;}#main-slider .carousel .item:first-child { top: auto; position: relative;}#main-slider .carousel .item.active { opacity: 1; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; z-index: 1;}#main-slider .prev,#main-slider .next { position: absolute; top: 50%; background-color: rgba(0, 0, 0, 0.3); color: #fff; display: inline-block; margin-top: -25px; font-size: 24px; height: 50px; width: 50px; line-height: 50px; text-align: center; border-radius: 4px; z-index: 5;}#main-slider .prev:hover,#main-slider .next:hover {

66

background-color: rgba(0, 0, 0, 0.5); border-radius: 10px;}#main-slider .prev { left: 10px;}#main-slider .next { right: 10px;}#main-slider .active .animation.animated-item-1 { -webkit-animation: fadeInUp 300ms linear 300ms both; -moz-animation: fadeInUp 300ms linear 300ms both; -o-animation: fadeInUp 300ms linear 300ms both; -ms-animation: fadeInUp 300ms linear 300ms both; animation: fadeInUp 300ms linear 300ms both;}#main-slider .active .animation.animated-item-2 { -webkit-animation: fadeInUp 300ms linear 600ms both; -moz-animation: fadeInUp 300ms linear 600ms both; -o-animation: fadeInUp 300ms linear 600ms both; -ms-animation: fadeInUp 300ms linear 600ms both; animation: fadeInUp 300ms linear 600ms both;}#main-slider .active .animation.animated-item-3 { -webkit-animation: fadeInUp 300ms linear 900ms both; -moz-animation: fadeInUp 300ms linear 900ms both; -o-animation: fadeInUp 300ms linear 900ms both; -ms-animation: fadeInUp 300ms linear 900ms both; animation: fadeInUp 300ms linear 900ms both;}#main-slider .active .animation.animated-item-4 { -webkit-animation: fadeInUp 300ms linear 1200ms both; -moz-animation: fadeInUp 300ms linear 1200ms both; -o-animation: fadeInUp 300ms linear 1200ms both; -ms-animation: fadeInUp 300ms linear 1200ms both; animation: fadeInUp 300ms linear 1200ms both;}#services .media:hover .icon-md { border-radius: 10px; background-color: rgba(0, 0, 0, 0.8);}#recent-works { padding: 90px 0;}#recent-works .item-inner { position: relative;

67

margin: 0;}.portfolio-items,.portfolio-filter { list-style: none; padding: 0; margin: 0 -20px 20px 0;}.portfolio-filter > li { display: inline-block;}.portfolio-items > li { float: left; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.portfolio-items.col-2 > li { width: 50%;}.portfolio-items.col-3 > li { width: 33%;}.portfolio-items.col-4 > li { width: 25%;}.portfolio-items.col-5 > li { width: 20%;}.portfolio-items.col-6 > li { width: 16%;}.portfolio-item { padding: 0; margin: 0;}.portfolio-item .item-inner { background: #fff; border: 1px solid #eee; padding: 10px 10px 0; margin: 0 20px 20px 0; position: relative;}.portfolio-item img { width: 100%;

68

}.portfolio-item h5 { background: #fff; margin: 0; padding: 10px 0; font-weight: 700; font-size: 14px; color: #2c3e50; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}.portfolio-item .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: rgba(255, 255, 255, 0.9); text-align: center; vertical-align: middle; -webkit-transition: opacity 300ms; -moz-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms;}.portfolio-item .overlay .preview { position: relative; top: 50%; display: inline-block; margin-top: -20px;}.portfolio-item:hover .overlay { opacity: 1;}/* Start: Recommended Isotope styles *//**** Isotope Filtering ****/.isotope-item { z-index: 2;}.isotope-hidden.isotope-item { pointer-events: none; z-index: 1;}/**** Isotope CSS3 transitions ****/

69

.isotope,

.isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s;}.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width;}.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity;}/**** disabling Isotope CSS3 transitions ****/.isotope.no-transition,.isotope.no-transition .isotope-item,.isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s;}/* End: Recommended Isotope styles *//* disable CSS transitions for containers with infinite scrolling*/.isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none;}#pricing-table .plan { border-radius: 4px; list-style: none; margin: 0 0 20px; background: #3498db;

70

text-align: center; padding: 30px 0;}#pricing-table .plan li { padding: 5px 0; color: #fff; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms;}#pricing-table .plan li.plan-name { font-size: 24px; line-height: 24px; color: #fff;}#pricing-table .plan li.plan-name h3 { margin: 0;}#pricing-table .plan li.plan-price { margin-bottom: 10px;}#pricing-table .plan li.plan-price > div { display: inline-block; background-color: rgba(0, 0, 0, 0.2); padding: 10px; font-size: 24px; border-radius: 100%; width: 70px; height: 70px;}#pricing-table .plan li.plan-price > div sup { font-size: 10px; line-height: 10px;}#pricing-table .plan li.plan-price > div > small { display: block; font-size: 11px;}#pricing-table .plan li.plan-action { margin-top: 10px; border-top: 0;}#pricing-table .plan.featured { background-color: #2c3e50;}

71

#title h1 { margin: 0; font-size: 36px; font-weight: 300;}.center { text-align: center;}#meet-the-team .designation { margin-top: 5px; display: block; font-size: 13px;}.img-thumbnail { border: 0;}.progress,.progress .bar { background: #fff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; height: 30px; line-height: 30px;}.well { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 0;}ul.breadcrumb { margin: 20px 0 0; background: transparent;}ul.breadcrumb > li { text-shadow: none;}ul.breadcrumb > li > a,ul.breadcrumb > li .divider { color: #fff;}ul.breadcrumb > li.active { color: rgba(255, 255, 255, 0.7);}ul.tag-cloud {

72

list-style: none; padding: 0; margin: 0;}ul.tag-cloud li { display: inline-block; margin: 0 0 2px 0;}.btn-social { border: 0; color: #fff; border-radius: 100%; display: inline-block; width: 36px; height: 36px; line-height: 36px; text-align: center; padding: 0;}.btn-social.btn-facebook { background: #4f7dd4;}.btn-social.btn-facebook:hover { background: #789bde;}.btn-social.btn-twitter { background: #5bceff;}.btn-social.btn-twitter:hover { background: #8eddff;}.btn-social.btn-linkedin { background: #21a6d8;}.btn-social.btn-linkedin:hover { background: #49b9e3;}.btn-social.btn-google-plus { background: #dc422b;}.btn-social.btn-google-plus:hover { background: #e36957;}.btn-social:hover { color: #fff;}

73

.navbar-inverse { border: none;}.navbar-inverse .navbar-brand { font-family: 'Bubbler One', sans-serif; font-size: 36px; line-height: 50px; color: #fff;}.navbar-inverse .navbar-nav { margin-top: 20px;}.navbar-inverse .navbar-nav > li > a { padding-top: 7px; padding-bottom: 7px; border-radius: 4px; color: #bdc3c7;}.navbar-inverse .navbar-nav > .active > a,.navbar-inverse .navbar-nav > .active > a:hover,.navbar-inverse .navbar-nav > .active > a:focus,.navbar-inverse .navbar-nav > .open > a,.navbar-inverse .navbar-nav > .open > a:hover,.navbar-inverse .navbar-nav > .open > a:focus { background-color: #2c3e50;}.navbar-inverse .navbar-nav .dropdown-menu { background-color: #2c3e50; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 0; padding: 0; margin-top: -3px;}.navbar-inverse .navbar-nav .dropdown-menu > li > a { padding: 8px 15px; color: #bdc3c7;}.navbar-inverse .navbar-nav .dropdown-menu > li:hover > a,.navbar-inverse .navbar-nav .dropdown-menu > li:focus > a,.navbar-inverse .navbar-nav .dropdown-menu > li.active > a { background-color: rgba(0, 0, 0, 0.3);}.navbar-inverse .navbar-nav .dropdown-menu > li:last-child > a { border-radius: 0 0 3px 3px;

74

}.navbar-inverse .navbar-nav .dropdown-menu > li.divider { background-color: rgba(0, 0, 0, 0.1);}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form { border-top: 0;}#social-media .icon-facebook { background-color: #3c5899;}#social-media .icon-facebook:hover { background-color: #4e6fba;}#social-media .icon-twitter { background-color: #29c5f6;}#social-media .icon-twitter:hover { background-color: #5ad2f8;}#social-media .icon-google-plus { background-color: #d13d2f;}#social-media .icon-google-plus:hover { background-color: #da6459;}#social-media .icon-pinterest { background-color: #c61118;}#social-media .icon-pinterest:hover { background-color: #ec1e26;}.icon-lg { font-size: 48px; height: 108px; width: 108px; line-height: 108px; color: #fff; margin: 10px; background-color: rgba(0, 0, 0, 0.4); text-align: center; display: inline-block !important; border-radius: 100%;}.icon-md { font-size: 36px;

75

height: 68px; width: 68px; line-height: 68px; color: #fff; margin-right: 10px; background-color: rgba(0, 0, 0, 0.4); text-align: center; display: block; border-radius: 50%; -webkit-transition: 500ms; -moz-transition: 500ms; -o-transition: 500ms; transition: 500ms;}.modal { border: 0;}.modal#loginForm { width: 600px; margin-left: -300px;}.modal .modal-header { border: 0; padding: 20px 20px 0;}.modal .modal-header > h4 { font-weight: 300; font-size: 14px; color: #848484; text-transform: uppercase; margin: 0;}.modal .modal-body { padding: 20px;}.modal input[type="text"],.modal input[type="password"] { padding: 5px 10px; min-height: 30px; width: 130px; margin-right: 10px;}.modal .icon-remove { color: #848484; position: absolute; right: -5px;

76

top: -5px; width: 16px; height: 16px; line-height: 16px; text-align: center; display: block; background: #ebebeb; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; cursor: pointer;}.modal button { margin-left: 10px; border: 0;}.gap { margin-bottom: 50px;}.big-gap { margin-bottom: 100px;}.no-margin { margin: 0; padding: 0;}.registration-form { border: 0; background-color: #fff; padding: 20px; display: inline-block;}#bottom { color: #bdc3c7;}#bottom h4 { margin-top: 0; margin-bottom: 15px;}#bottom .media-heading { display: block; font-weight: 400;}.row > div { margin-bottom: 10px;}

77

ul.unstyled { list-style: none; padding: 0; margin: 0;}/*Unordered Lists*/ul.arrow,ul.arrow-double,ul.tick,ul.cross,ul.star,ul.rss { list-style: none; padding: 0; margin: 0;}ul.arrow li::before,ul.arrow-double li::before,ul.tick li::before,ul.cross li::before,ul.star li::before,ul.rss li::before,ul.arrow li::after,ul.arrow-double li::after,ul.tick li::after,ul.cross li::after,ul.star li::after,ul.rss li::after { font-family: FontAwesome; font-size: 11px;}ul.arrow li::before,ul.arrow-double li::before,ul.tick li::before,ul.cross li::before,ul.star li::before,ul.rss li::before { margin-right: 5px;}ul.arrow li::before { content: "\f105";}ul.arrow-double li::before { content: "\f101";}ul.tick li::before {

78

content: "\f00c";}ul.cross li::before { content: "\f00d";}ul.star li::before { content: "\f006";}ul.rss li::before { content: "\f09e";}#footer { padding-top: 30px; padding-bottom: 30px; color: #bdc3c7;}#footer a { color: #bdc3c7;}#footer a:hover { color: #d9534f;}#footer ul { list-style: none; padding: 0; margin: 0;}#footer ul > li { display: inline-block; margin-left: 15px;}ul.social { list-style: none; margin: 10px 0 0; padding: 0; display: inline-block;}ul.social > li { display: inline-block; margin: 0 5px;}ul.social > li > a { font-size: 24px; color: #666;}ul.social > li > a:hover {

79

color: #999;}.box-border { padding: 15px;}.accordion-group { background-color: #fff; border-top: 1px solid #f0f0f0;}.accordion-heading .accordion-toggle { color: #666; font-weight: 700;}.accordion-inner { border-top: 0;}.blog .blog-item { background-color: #fff; border-radius: 5px; margin-bottom: 20px;}.blog .blog-item .img-blog { width: 100%; border-radius: 5px 5px 0 0;}.blog .blog-item .blog-content { padding: 20px;}.blog .blog-item h3 { margin-top: 0;}.blog .blog-item .entry-meta { margin-bottom: 20px;}.blog .blog-item .entry-meta > span { display: inline-block; color: #999; margin-right: 10px; font-size: 12px;}.blog .blog-item .entry-meta > span a { color: #999;}ul.pagination > li > a { border: 0;}

80

ul.pagination > li.active > a,ul.pagination > li:hover > a { background-color: #34495e; color: #fff;}textarea#message { padding: 10px 15px; height: 219px;}.widget { margin-bottom: 30px;}ul.gallery { list-style: none; padding: 0; margin: 0;}ul.gallery li { display: block; width: 60px; padding: 0; margin: 0 4px 4px 0; float: left;}ul.faq { list-style: none; margin: 0;}ul.faq li { margin-top: 30px;}ul.faq li:first-child { margin-top: 0;}ul.faq li span.number { display: block; float: left; width: 50px; height: 50px; line-height: 50px; text-align: center; background: #34495e; color: #fff; font-size: 24px;}ul.faq li > div {

81

margin-left: 70px;}ul.faq li > div h3 { margin-top: 0;}#error { text-align: center; margin-top: 150px; margin-bottom: 150px;}

4.11.2 myStyle.css

.chartMargin{margin-top: 20px;

}#container p{

text-align: center;font-size: 36px;color:#f0ad4e;

}.item-kanji, .item-words{

background: #fff; border: 1px solid #eee; padding: 10px 10px 0; margin: 0 20px 20px 0; position: relative; text-align: center;

}.item-kanji h3,.item-words h3{

font-size: 2em;margin: 8px auto;color:white;display: inline-block;border:1px solid #d43f3a;background-color: #d9534f;cursor: pointer;

}.item-words h3{

font-size: 1.5em;}.item-kanji p,.item-words p{

text-align: left;margin:5px;

82

}.item-kanji hr,.item-words hr{

margin:0px;}.item-kanji i,.item-words i{

color:#b9b992;}.bolded{

font-weight: bold;}

.nesto img{position: relative;left:100%;}

.hidden1{display: none!important;

visibility: hidden!important;}.proba{

position: fixed;left: 50%;top:50%;

transform: translate(-50%, -50%);z-index: 1000;

}

.proba table th{background-color: #d9534f;color:white;

}.proba table tr{

background-color: #34495e;color:#bdc3c7;

}

.translateButton{margin-bottom:40px;

}.proba{

color:red;}.errorRed{

83

border:1px solid red;}.info-box{

text-align: left;width:auto;max-width: 252px;margin: auto;padding:16px;border-radius:3px;

}.info-box.fail{

border:1px solid #e5003c;background-color: #ffc4be;color:#e5003c;

}.info-box.success{

border:1px solid green;background-color: #e2ffd9;color:green;

}

5. Baza Podataka

5.1 Baza

84

Slika 9 – Baza podataka

Na slici 9 nalazi se dizajn baze podataka.

6. Zaključak

85

Web aplikacija kao podrska za ucenje stranog jezika u Laravel-u je napravljena za pomoć učenju pojedincu i trenutnu ima ulogu learning bloga. Gde drugi pojedinci mogu da prate napredak kao i same reči koje je pojedinac naučio. Ideja je nastala zbog potrebe da se lakše pretražuju reči, kao i da se grafički prikaže napredak, kako zbog zanimljivosti tako i zbog motivacije da se svaki mesec bude sve bolji i bolji. Ostvareno je da se celo ažuriranje reči kao i Kanji znakova vrši importovanjem csv-a, što omogućava znatno brži unos reči kao i mogućnost da se unose značenja reči kako se uče.

Prilikom učenja jezika jedan od glavnih problema kod ovako specifiičnih jezika kao što je Japanski jeste, što se nedovoljno informacija dobije ako se zaboravljena reč dobije putem google translate-a. Ovaj aplikacija omogućava bolje snalaženje po tom pitanju, i pruža dodatne informacije koje prevodilac ne bi pružio.

Kroz lep vizuelni prikaz omogućava prikaz i podsećanje Kanji znakova, koje bi inače na sa papira ili drugih mesta bilo naporno gledati.

Trenutno ne postoji mogućnost da više članova koristi aplikaciju, ali to je jedna od stvari koja se može omogućiti u budućnosti ukoliko se za to bude ukazala potreba. Takođe je moguće napraviti i mini-igru koja bi omogućavala korisnicima da na osnovu Kanji znaka pogađaju značenje ili izvorno čitanje i obrnuto. Ukoliko više članova bude zainteresovano moguće je napraviti takmičenja u igri, kao i u napredku koje je korisnik ostvario. Postoji dosta stvari koji se mogu nadograditi i daljim ubacivanjem reči i kanji znakova otvaraće se još više novih mogućnosti.

Glavna ideja ove aplikacije bila je da se omogući prikaz napredka kroz lep grafički prikaz. Da se mogu videti statistike za svaki mesec u godini, i da se godine mogu menjati. Takođe je bilo bitno da se prikazuje ukupan broj naučenih znakova i reči za svaki mesec, a ne samo pojedinačno za svaki dan. Ova ideja je u potpunosti ostvarena, ali i dalje postoje ideje kako se može nadograditi.

7. Literatura

1. http://webdizajn.ict.edu.rs/

86

http://webdizajn.ict.edu.rs/

2. https://laracasts.com/3. http://stackoverflow.com/ 4. http://php.net/ 5. http://www.w3schools.com/ 6. http://www.highcharts.com/docs 7. http://getbootstrap.com/getting-started/

87

http://www.highcharts.com/docs

http://www.w3schools.com/

http://php.net/

http://stackoverflow.com/

uvod - webdizajn.ict.edu.rswebdizajn.ict.edu.rs/.../dipl_php_lara_2016_radmilo_dimi… · web...

Documents