Anfänger | Webdesign-ugurcu Tutorial

Kategorie: Anfänger

Javascript Grundlagen

Juni 12, 2017 / Mario Ugurcu / Keine Kommentare

Hallo Zusammen zu unsere Javascript Grundlagen Tutorial.

Um Javascript zu benutzen gibt es verschiedene Möglichkeiten.

-Inline

<script type="text/javascript">

........

</script>

........

</script>

-aus einer .js Datei

<script src="dateiname.js"></script>

1	<script src="dateiname.js"></script>

Das auslagern das Code in einer .js Datei ist, zur Übersichtlichkeit, sehr zu empfehlen.

Wir können Javascript, wie in den folgenden kleinen Beispielen benutzen.

<button onclick="colorChange()">red</button>
<p id="para">green</p>

<script type="text/javascript">

function colorChange(){

document.getElementById("para").style.color = "red";

}

</script>

<p id="para">green</p>

function colorChange(){

document.getElementById("para").style.color = "red";

}

</script>

in diesen einfachen Beispiel ändern wir mittels Javascript die Farbe des p-tags Inhalt auf rot.

<button onclick="window.location.href='/startseite'">Startseite</button>

1	<button onclick="window.location.href='/startseite'">Startseite</button>

So können wir mittels Javascript navigieren .

Als letztes Beispiel wollen wir noch eine Fehlermeldung erzeugen.

<button onclick="checkInput()">Check Input</button>
<input id="input" type="text" value="" placeholder="Geben Sie das Wort Rot ein" />

<script type="text/javascript">


function checkInput(){

var input = document.getElementById("input").value; 

if(input === "Rot"){
 alert("Es stimmt überein");
} else {
 alert("Leider war Ihre Eingabe falsch");
}

}

</script>

<button onclick="checkInput()">Check Input</button>

function checkInput(){

var input = document.getElementById("input").value;

if(input === "Rot"){

alert("Es stimmt überein");

} else {

alert("Leider war Ihre Eingabe falsch");

}

</script>

Hier wird überprüft ob der Benutzer in dem Eingabefeld das Wort „Rot“ eingibt , wenn er dies Tut bekommt er eine Bestätigung dafür. Eine falsche Eingabe erzeugt eine Fehlermeldung.

Nun noch paar Grundlegende dinge.

Einleiten von Variablen

global_v = "test_global";

//nicht Globale Variablen
test();
zwei();

function test(){

var test = "test";
//hier können wir die Globale Variable benutzen
console.log(global_v);
//Die nicht Gloabale können wir hier ausgeben
console.log(test);

}

function zwei(){

//hier können wir die Globale Variable benutzen
console.log(global_v);
//Die nicht Gloabale Variable aus der Funktion test können wir hier nicht ausgeben
console.log(test);

}

global_v = "test_global";

//nicht Globale Variablen

test();

zwei();

function test(){

var test = "test";

//hier können wir die Globale Variable benutzen

console.log(global_v);

//Die nicht Gloabale können wir hier ausgeben

console.log(test);

}

function zwei(){

//hier können wir die Globale Variable benutzen

console.log(global_v);

//Die nicht Gloabale Variable aus der Funktion test können wir hier nicht ausgeben

console.log(test);

}

Bei fragen scheut euch nicht in die Kommentare zu schreiben.

Javascript Funktion , Arrays, Schleifen

Juni 12, 2017 / Mario Ugurcu / Keine Kommentare

Heute wollen wir uns damit befassen grundlegende Aspekte bei der Verwendung von eigenen Funktion , Arrays und schleifen näher zu bringen.

Bennent eure Funktion und Arrays direkt so das Ihr bei späteren Code einsieht direkt wisst was ihr damit macht. Ein Arrays das Buchtitel speichern einfach nur mit Array zu benennen , würde keinen Rückschluss auf seine Funktion geben. Es allerdings Buchtitel oder einfach Titel zu nennen schon. Gern könnt ihr auch die Benennung in englisch machen also titles.

Ein solches Array könnte also wie folgt aussehen.

//ein Eindimensionales Array
var titles = ["Herr der Ringe","Harry Potter","Dune - der Wüstenplanet"];

1 2	//ein Eindimensionales Array var titles = ["Herr der Ringe","Harry Potter","Dune - der Wüstenplanet"];

Wenn wir nun alle diese Namen in der Console ausgeben haben wollen, können wir dies mittel einer for-Schleife zum beispiel erledigen:

for(var x = 0;x < titles.length;x++){
console.log(titles[x]);
}

for(var x = 0;x < titles.length;x++){

console.log(titles[x]);

}

Die Ausgabe sieht wie folgt aus:

Herr der Ringe
Harry Potter
Dune – der Wüstenplanet.

Wir können dafür auch eine while-Schleife benutzen:

var x = 0;
while(x < titles.length){
console.log(titles[x]);
x++;
}

var x = 0;

while(x < titles.length){

console.log(titles[x]);

x++;

}

Noch ein paar dinge zu Funktion

.Gibt in euren Konstruktor nur Parameter ein die ihr wirklich braucht. Viele dinge könnt ihr auch aus dem DOM mittel document.getElementById z.B holen.

Es ist nicht nötig alles zu übergeben. Auch hier achte auf die Namenswahl besonders wenn ihr mit anderen Programmieren zusammen an einen Projekt Arbeitet werden Sie es auch danken.

Nutz möglich viele Kommentare in euren Code um euch selbst und anderen einen Funktionalen hinweis zu hinterlegen. Kommentare leitet ihr mit ,,//“ für eine Zeile ein.Bei mehreren Zeilen beginnen mit ,,/*“ und enden mit ,,*/“ alles was dazwischen steht wird auskommentiert.

Bei Fragen einfach unten in die Kommentare rein schreiben.

PHP MVC Pattern Teil V

Juni 6, 2017 / Mario Ugurcu / Keine Kommentare

Die View Base Klasse sorgt für unser Frontend Ansicht. Da diese bereits im ersten Tutorial Teil steh stelle ich hier lediglich nochmal komplett zu Verfügung.

class View { 
 public function set($key, $value) {
    $this->values[$key] = $value;
}
    
    public function render($name, $include = false){
        if($include == true){
            require_once 'views/' . $name . '.php';
        }
        else{
        require_once 'views/header.php' ;
        $output = file_get_contents('views/' . $name . '.php');
        if($this->values){
        foreach ($this->values as $key => $value) {
        $tagToReplace = "[@$key]";
        $output = str_replace($tagToReplace, $value, $output);
        echo $output;
        } } else{
            require_once 'views/' . $name . '.php';
        }
        require_once 'views/footer.php';
        }
        
    }
}

class View {

public function set($key, $value) {

$this->values[$key] = $value;

}

public function render($name, $include = false){

if($include == true){

require_once 'views/' . $name . '.php';

}

else{

require_once 'views/header.php' ;

$output = file_get_contents('views/' . $name . '.php');

if($this->values){

foreach ($this->values as $key => $value) {

$tagToReplace = "[@$key]";

$output = str_replace($tagToReplace, $value, $output);

echo $output;

} } else{

require_once 'views/' . $name . '.php';

}

require_once 'views/footer.php';

}

Sollte ihr fragen haben stellt sie in dem Kommentaren. In ersten Teil findet ihr noch nützliche Hinweise zu dem Codezeilen.

PHP MVC Pattern Teil IV

Juni 6, 2017 / Mario Ugurcu / Keine Kommentare

Für die Model Base-Klasse gibt es eine Besonderheit , um in jedem Model über die Datenbank gehen zu können bedienen wir uns hier einer Grund Database class die von PDO erbt und die Model class instanziiert dann aus der Database class ein Object.

PHP MVC Pattern Teil III

Juni 6, 2017 / Mario Ugurcu / Keine Kommentare

Die Controller Base-Klasse benötigen wir , damit alle Controller über die Grundsätzliche Funktionalität verfügt.

Als erstes erstellen wir unseren Contructor.

class controller {
    
    public function __construct() {
      
        $this->view = new View();
        
       
    }

class controller {

public function __construct() {

$this->view = new View();

}

PHP MVC Pattern Teil II

Juni 5, 2017 / Mario Ugurcu / 5 Kommentare

Willkommen zurück beim PHP MVC Pattern Tutorial Teil 2.

Heute wollen wir uns mit einfachen Base-klassen beschäftigen.

Beginnen wir mit der Bootstrap klassen.

PHP MVC Pattern Teil I

Juni 5, 2017 / Mario Ugurcu / Keine Kommentare

Untern einen MVC(Model-View-Controller) Pattern versteht man die Aufteilung der Programmierung. In einen Controller der die Daten an die View und den Model weitergibt.

Der Controller kennt in dem Fall das View und das Model. Das Model kennt die View und die View bekommt lediglich Daten bereitgestellt. Auf der unten abgebildeten Grafik kann man das Prinzip sehen währen der Controller Daten zum Model senden kann und dieser dann zurück von Model zum Controller kommen, ist die View lediglich Daten Empfänger.

PDO – Ein anderer Weg

Juni 1, 2017 / Mario Ugurcu / Keine Kommentare

Nun wollen wir euch auch noch einen anderen PHP 7.0 Weg zeigen, wie man eine Datenbankverbindung aufbauen kann.

<?php

$pdo = new PDO('mysql:host=localhost;dbname=Datenbankname', 'Datenbankbenutzer', 'Datenbankpasswort');

?>

<?php

$pdo = new PDO('mysql:host=localhost;dbname=Datenbankname', 'Datenbankbenutzer', 'Datenbankpasswort');

Hier haben wir eine Verbindung mittels PDO zu MySQL aufgebaut.

Datenbankverbindung mittels MySQLi

Juni 1, 2017 / Mario Ugurcu / Keine Kommentare

Hier möchten wir euch zeigen , wie ihr mittel MySQLi eine Datenbankverbindung aufbaut.

<?php 
$con = new mysqli("localhost","Datenbankbenutzer","Datenbankpasswort","Datenbankname");

?>

<?php

$con = new mysqli("localhost","Datenbankbenutzer","Datenbankpasswort","Datenbankname");

Mit dieser Codezeile haben wir bereits ein MySQLi Object instanziiert.

Was wir benötigen sind die Zugangsdaten zu unserer Datenbank, mehr nicht.

Loginsystem mit HTML und PHP

Juni 1, 2017 / Mario Ugurcu / Keine Kommentare

Hier möchte ich euch ein kleines Beispiel für ein Loginsystem mit HTML und PHP geben. Wir sollten erstmal darüber nachdenken was wir dafür benötigen. Im Normalfall brauchen wir einen Benutzernamen und ein Passwort.

Wir sollten also ein HTML Formular erstellen, indem wir diese beiden Felder abfragen:

<form action="#" method="Post">
<label>Benutzername:</label><input type="text" name="user" value="" />
<label>Passwort:</label><input type="password" name="pw" value="" />

</form>

<label>Benutzername:</label><input type="text" name="user" value="" />

<label>Passwort:</label><input type="password" name="pw" value="" />

</form>

Webdesign-ugurcu Tutorial

PROGRAMMIEREN LEICHT GEMACHT

Kategorie: Anfänger

Javascript Grundlagen

Javascript Funktion , Arrays, Schleifen

Noch ein paar dinge zu Funktion

PHP MVC Pattern Teil V

PHP MVC Pattern Teil IV

PHP MVC Pattern Teil III

PHP MVC Pattern Teil II

PHP MVC Pattern Teil I

PDO – Ein anderer Weg

Datenbankverbindung mittels MySQLi

Loginsystem mit HTML und PHP

Neueste Beiträge

Kategorien