Wie man eine unterhaltsame Aufgabenliste mit PHP und AJAX codieren kann

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Für das Tuts+ Premium-Tutorial dieser Woche werden wir mit vielen verschiedenen Technologien arbeiten. Letztendlich erstellen wir eine Aufgabenliste, mit der Sie oder Ihr Benutzer Elemente asynchron erstellen, aktualisieren und löschen können. Um unsere Aufgabe zu erfüllen, werden wir die AJAX-Funktionen von PHP und jQuery verwenden. Ich denke, Sie werden feststellen, dass es nicht ganz so schwer ist, wie Sie zunächst vielleicht denken. Ich zeige dir genau wie!

Dieses Tutorial enthält einen Screencast, der Tuts+ Premium-Mitgliedern zur Verfügung steht.

Schritt 1: Erstellen einer neuen Datenbank

Wie Sie sich vorstellen können, können wir Datensätze in einer statischen Umgebung nicht speichern, löschen und aktualisieren. Wir müssen also eine MySQL-Datenbank erstellen, in der die Informationen gespeichert werden.

Wenn Sie PHPMyAdmin verwenden, rufen Sie das Control Panel unter https://localhost/phpmyadmin auf.

Geben Sie im Textfeld "Neue Datenbank erstellen" "db" ein und klicken Sie auf "Erstellen". Als Nächstes müssen Sie eine Tabelle erstellen. Geben Sie "todo" und "3" für "Anzahl der Felder" ein.

Unsere Spalten erstellen

Wir müssen jetzt die entsprechenden Spalten hinzufügen.

id : eindeutige ID zum Identifizieren jeder Zeile.
title : Der Titel unseres Artikels.
description : Eine Beschreibung, die genau beschreibt, was wir tun müssen!

Stellen Sie sicher, dass die Optionen der einzelnen Felder mit den im folgenden Bild gezeigten übereinstimmen.

Testzeilen einfügen

Nachdem wir unsere Datenbank erstellt haben, fügen wir schnell einige Testzeilen hinzu. Klicken Sie auf Ihre "db" -Datenbank. Wählen Sie dann "Durchsuchen". Sie werden zu einem Bildschirm weitergeleitet, auf dem der Inhalt jeder Zeile in Ihrer Datenbank aufgelistet ist. Offensichtlich ist dieser Abschnitt gerade leer. Wählen Sie "Einfügen" und fügen Sie einige Spalten hinzu. Geben Sie hier ein, was Sie möchten.

Vollbild

Schritt 2: Die Db-Klasse

Obwohl dies keinesfalls erforderlich ist, finde ich es am einfachsten, meine Funktionen zu verwalten, wenn ich sie in einer Klasse gruppiere. In Anbetracht dessen erstellen wir jetzt eine "Db" -Klasse, die mehrere Funktionen enthält.

__construct : Diese Funktion wird automatisch ausgeführt, sobald das Objekt instanziiert wird.
delete_by_id() : Löscht die erforderliche Zeile, indem die eindeutige ID der Zeile übergeben wird.
update_by_id() : Aktualisiert die Zeile durch Übergabe ihrer eindeutigen ID.

Öffnen Sie den Code-Editor Ihrer Wahl und erstellen Sie eine neue Datei mit dem Namen "db.php". Fügen Sie in dieses leere Dokument die folgenden Codezeilen ein.

 
class Db { 
	 
	private $mysql; 
	 
	function __construct() { 
		$this->mysql = new mysqli('localhost', 'root', 'yourPassword', 'db') or die('problem'); 
	} 
} // end class

Um eine neue Klasse zu erstellen, verwenden wir die unten gezeigte Syntax.

1
2	class 'myClass' {
3
4	}

Mit nur dem obigen Code haben wir erfolgreich eine neue Klasse erstellt. Es macht noch nichts, aber es ist trotzdem eine Klasse!

__construct()

Die __construct() -Methode (Klassengespräch für "Funktion") wird als "magische Methode" bezeichnet. Es wird sofort ausgeführt, nachdem eine Klasse instanziiert wurde. Wir werden diese Methode verwenden, um unsere erste Verbindung zur MySQL-Datenbank herzustellen.

1
2	function __construct() {
3	$this->mysql = new mysqli('localhost', 'root', 'yourPassword', 'db') or die('problem');
4	}

Wenn Sie mit OOP nicht vertraut sind, kann es zunächst etwas entmutigend sein. Zum Glück ist es nicht allzu schwer zu verstehen. Wir möchten, dass unsere MySQL-Verbindung für alle Methoden in unserer Klasse verfügbar ist. In Anbetracht dessen wäre es keine gute Idee, die Variable $mysql in einer bestimmten Funktion zu speichern. Stattdessen sollte es eine Klasseneigenschaft sein.

1
2	private $mysql;

Zugriff auf Eigenschaften über Methoden

Innerhalb einer Methode können wir nicht einfach auf unsere Eigenschaft zugreifen, indem wir "$mysql" eingeben. Wir müssen uns zuerst auf das Objekt beziehen.

1
2	$this->mysql

Beachten Sie unbedingt, dass wir beim Zugriff auf eine Immobilie das Dollarzeichen weglassen können.

Mysqli

Es ist vorzuziehen, mysql verbessert (mysqli) anstelle der herkömmlichen mysql_connect-Methode zu verwenden, wenn eine Verbindung zu einer Datenbank hergestellt wird. Es ist nicht nur schneller, sondern ermöglicht uns auch die Verwendung eines OOP-Ansatzes.

Beim Erstellen einer neuen Instanz der mysqli-Klasse müssen vier Parameter übergeben werden.

host : 'localhost'
username : root
password : 'yourPassword'
database name : db

Das sollte es vorerst tun. Wir werden im Verlauf dieses Tutorials zu unserer Klasse zurückkehren, um neue Methoden anzuhängen. Denken Sie daran, wenn wir eine neue Instanz dieser Klasse erstellen...

1
2	require 'db.php';
3	$db = new Db();

... wir öffnen dank der magischen Methode __construct() automatisch eine Verbindung zu unserer Datenbank.

Das Markup

Jetzt müssen wir unser Markup für die Homepage erstellen. Fügen Sie Ihrer Lösung eine neue Seite hinzu und speichern Sie sie als "index.php". Fügen Sie als Nächstes Folgendes ein.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<link rel="stylesheet" href="css/default.css" /> 
	<title>My To-Do List</title> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
	<script type="text/javascript" src="js/scripts.js"></script> 
</head> 
 
<body> 
 
<div id="container"> 
	 
<h1>My to-Do List</h1> 
 
<ul id="tabs"> 
	<li id="todo_tab" class="selected"><a href="#">To-Do</a></li>		 
</ul> 
 
<div id="main"> 
	 
<div id="todo"> 
... 
</div><!--end todo wrap--> 
 
<div id="addNewEntry"> 
... 
</div><!-- end add new entry --> 
 
</div><!-- end main--> 
</div><!--end container--> 
 
</body> 
</html>

Analyse

Im Kopf unseres Dokuments verweise ich auf das CDN von Google, um auf jQuery zuzugreifen. Dies ist leicht die bevorzugte Methode bei der Verwendung von jQuery. Als Nächstes verweise ich auf eine 'scripts.js'-Datei, die wir später in diesem Tutorial erstellen werden.

Lassen Sie uns schnell überprüfen, wofür jedes Div gedacht ist.

container : Standardverpackung div.
ul#tabs : Unsere Navigation. Wir werden Javascript verwenden, um die zusätzlichen Registerkarten hinzuzufügen. Ich werde in Kürze erklären, warum.
main : Wrap für den Hauptinhalt.
todo : Tab 1.
addNewEntry : Tab 2

Schritt 4: CSS

Dies ist per se kein CSS-Tutorial. Sie können das von mir verwendete Stylesheet überprüfen. Es befindet sich im Download-Bundle. Wenn Sie eine eingehendere Überprüfung wünschen, schauen Sie sich den Screencast an.

Schritt 5: Datensätze abrufen

Nachdem wir uns mit der Datenbank verbunden und unser Markup/CSS erstellt haben, schreiben wir einen Code, der die Datenbankzeilen abruft.

Fügen Sie im "todo" -Div Folgendes ein.

 
<div id="todo"> 
 
<?php 
require 'db.php'; 
$db = new Db(); 
$query = "SELECT * FROM todo ORDER BY id asc"; 
$results = $db->mysql->query($query); 
 
if($results->num_rows) { 
	while($row = $results->fetch_object()) { 
		$title = $row->title; 
		$description = $row->description; 
		$id = $row->id; 
	 
echo '<div class="item">'; 
 
$data = <<<EOD 
<h4> $Title </h4> 
<p> $description </p> 
 
<input type="hidden" name="id" id="id" value="$id" /> 
 
<div class="options"> 
	<a class="deleteEntryAnchor" href="delete.php?id=$id">D</a> 
	<a class="editEntry" href="#">E</a> 
</div> 
EOD; 
		 
echo $data; 
echo '</div>'; 
	} // end while 
} else { 
	echo "<p>There are zero items. Add one now!</p>"; 
} 
?> 
</div><!--end todo wrap-->

Analyse

Verwenden Sie 'require', um auf unsere Db-Klasse zuzugreifen.
Erstellen Sie eine neue Instanz der Db-Klasse.
Erstellen Sie eine Abfrage. Dadurch werden alle Datensätze aus der "todo" -Tabelle abgerufen und in aufsteigender Reihenfolge sortiert.
Wir müssen jetzt unsere Abfrage ausführen. $db->mysql->query($query). $db verweist auf das Objekt. $mysql bezieht sich auf die mysqli-Klasse. $query ist eine Methode der mysqli-Klasse, mit der wir eine Abfrage übergeben können. Hier übergeben wir die gerade erstellte Zeichenfolge.
$results->num_rows gibt die Gesamtzahl der abgerufenen Zeilen aus der Datenbank zurück. Wenn eine oder mehrere zurückgegeben werden, verwenden wir eine while-Anweisung, um die Zeilen zu durchlaufen.
Erstellen Sie für jede Iteration eine temporäre Variable namens $row, die auf die Informationen verweist. Anschließend erstellen wir drei Variablen, die sich auf ihre jeweiligen Gegenstücke in der Datenbank beziehen.
Jeder Gegenstand wird in ein Div mit einer Klasse von "Gegenstand" eingeschlossen.
Als nächstes verwenden wir Heredocs, um unser Aufgabenelement zu formatieren. Heredocs ermöglichen eine einfache und organisierte Möglichkeit, HTML und PHP zu mischen. Lesen Sie diesen Screencast, um mehr zu erfahren.
Wickeln Sie den Titel in h4-Tags ein. die Beschreibung innerhalb von p Tags.
Der Benutzer benötigt eine Möglichkeit, jedes Element zu bearbeiten und zu löschen. Daher haben wir zwei Ankertags erstellt, mit denen wir dies tun können. Wir werden später darauf zurückkommen.
Echo unsere Heredocs-Informationen und schließen Sie die ".item" div.
Wenn keine Zeilen aus der Datenbank zurückgegeben wurden, geben Sie "Es gibt keine Elemente. Fügen Sie jetzt eins hinzu!" Zurück.

Hoffentlich machte das alles Sinn. Zu diesem Zeitpunkt sollten Sie Folgendes haben:

Schritt 6: Fügen Sie ein neues Element hinzu

Wir möchten auch, dass der Benutzer neue Datensätze einfügen kann. Lassen Sie uns ein Formular erstellen, das genau dies ermöglicht.

 
<div id="addNewEntry"> 
 
<hr /> 
<h2>Add New Entry</h2> 
<form action="addItem.php" method="post"> 
	<p> 
		<label for="title"> Title</label> 
		<input type="text" name="title" id="title" class="input"/> 
	</p> 
 
	<p> 
		<label for="description"> Description</label> 
		<textarea name="description" id="description" rows="10" cols="35"></textarea> 
	</p>	 
	 
	<p> 
		<input type="submit" name="addEntry" id="addEntry" value="Add New Entry" /> 
	</p> 
</form> 
 
</div><!-- end add new entry -->

Dies ist Ihr Standardformular. Wir haben Eingaben für einen Titel und eine Beschreibung hinzugefügt. Wenn Sie auf die Schaltfläche "Senden" klicken, werden die eingegebenen Informationen in "addItem.php" veröffentlicht. Lassen Sie uns diese Seite jetzt erstellen.

Schritt 7: AddItem.php

Erstellen Sie ein neues Dokument und speichern Sie es als "addItem.php". Fügen Sie den folgenden Code ein:

 
<?php 
 
require 'db.php'; 
$db = new Db(); 
 
// adds new item 
if(isset($_POST['addEntry'])) { 
	$query = "INSERT INTO todo VALUES('', ?, ?)"; 
	 
	if($stmt = $db->mysql->prepare($query)) { 
		$stmt->bind_param('ss', $_POST['title'], $_POST['description']); 
		$stmt->execute(); 
		header("location: index.php"); 
	} else die($db->mysql->error); 
}

Beziehen Sie sich auf unsere DB-Klasse.
Instanziieren Sie die Klasse.
Wenn die Senden-Schaltfläche mit dem Namen "addEntry" vorhanden ist, führen Sie den folgenden Code aus.
Erstellen Sie eine neue Abfrage. Sie werden feststellen, dass ich Fragezeichen als Werte verwende. Es ist die bevorzugte Methode, vorbereitete Anweisungen beim Aktualisieren unserer Datenbank zu verwenden. Dies ist eine hervorragende Möglichkeit, sich vor SQL-Injektionen zu schützen.
Bereiten Sie unsere MySQL-Variable vor, indem Sie die gerade erstellte Abfrage übergeben.
Wenn es erfolgreich vorbereitet wurde, binden Sie die entsprechenden Parameter. Der erste Parameter fragt nach den Datentypen für jedes Element. Ich habe 's' verwendet, um auf "string" zu verweisen. Die zweiten beiden Parameter erfassen die Titel- und Beschreibungswerte aus dem superglobalen POST-Array.
Führen Sie die Anweisung aus.
Leiten Sie den Benutzer schließlich zurück zur Startseite.

Schritt 7: Elemente aktualisieren

Mithilfe der AJAX-Funktionen von jQuery können Benutzer jedes Element ohne Postback aktualisieren. Erstellen Sie eine neue Datei in einem "js" -Ordner und nennen Sie sie "scripts.js". Denken Sie daran, dass wir diese Datei bereits in unserem Markup referenziert haben.

 
$(function() { 
$('.editEntry').click(function() { 
	var $this = $(this); 
	var oldText = $this.parent().parent().find('p').text(); 
	var id = $this.parent().parent().find('#id').val(); 
	$this.parent().parent().find('p').empty().append('<textarea class="newDescription" cols="33">' + oldText + '</textarea>'); 
	$('.newDescription').blur(function() { 
		var newText = $(this).val(); 
		$.ajax({ 
			type: 'POST', 
			url: 'updateEntry.php', 
			data: 'description=' + newText + '&id=' + id, 
			 
			success: function(results) { 
				$this.parent().parent().find('p').empty().append(newText); 
			} 
		}); 
	}); 
	return false; 
}); 
});

Wenn Sie zu unserem Markup auf index.php zurückkehren, sehen Sie:

 
<div class="options"> 
	<a class="deleteEntryAnchor" href="delete.php?id=$id">D</a> 
	<a class="editEntry" href="#">E</a> 
</div>

Jede Zeile dekodieren

1
2	$('.editEntry').click(function() {

Bei Verwendung von jQuery müssen wir darauf achten, wenn auf das Ankertag mit der Klasse "editEntry" geklickt wird.

1
2	var $this = $(this);

Als nächstes zwischenspeichern wir $(this) - dies bezieht sich auf das Ankertag, auf das geklickt wurde.

1
2	var oldText = $this.parent().parent().find('p').text();

Wir müssen die Originalbeschreibung speichern. Wir weisen das Ankertag an, das übergeordnete div zu finden, und suchen nach dem p-Tag, das den Beschreibungstext enthält. Wir erfassen diesen Wert mit "text()".

1
2	var id = $this.parent().parent().find('#id').val();

Um die richtige Zeile in unserer Datenbank zu aktualisieren, muss ich die ID dieser bestimmten Zeile kennen. Wenn Sie auf Ihren Code zurückgreifen, wird ein verstecktes Eingabefeld angezeigt, das diesen Wert enthält.

1
2	<input type="hidden" name="id" id="id" value="$id" />

Wieder verwenden wir "find", um auf diese versteckte Eingabe zuzugreifen und dann ihren Wert zu ermitteln.

1
2	$this.parent().parent().find('p').empty().append('<textarea class="newDescription" cols="33">' + oldText + '</textarea>');

Jetzt müssen wir dem Benutzer erlauben, eine neue Beschreibung einzugeben. Deshalb haben sie auf "Eintrag bearbeiten" geklickt, nicht wahr? Wir finden das Beschreibungs-P-Tag, leeren es und fügen dann einen Textbereich hinzu. Wir verwenden "empty()", um sicherzustellen, dass wir den gesamten Text entfernen. es wird nicht mehr benötigt. Der Wert dieses Textbereichs entspricht dem alten Text - aus praktischen Gründen.

1
2	$('.newDescription').blur(function() {

Suchen Sie diesen neuen Textbereich, und führen Sie eine Funktion aus, wenn der Benutzer das Textfeld verlässt.

1
2	var newText = $(this).val();

Erfassen Sie den neuen Text, den die Benutzer in diesen Textbereich eingeben.

 
$.ajax({ 
	type: 'POST', 
	url: 'updateEntry.php', 
	data: 'description=' + newText + '&id=' + id, 
			 
	success: function(results) { 
		$this.parent().parent().find('p').empty().append(newText); 
	} 
});

Rufen Sie die .ajax-Funktion auf und übergeben Sie einige Parameter. Der Typ ist "POST". Die URL für den Zugriff lautet "updateEntry.php". Die Daten, die an diese Seite übergeben werden sollen, sind der vom Benutzer eingegebene neue Text und die eindeutige ID aus dieser Zeile in der Datenbank. Wenn das Update erfolgreich durchgeführt wurde, führen Sie eine Funktion aus und aktualisieren Sie den alten Text mit dem neuen Text!

1
2	return false;

Geben Sie false zurück, um sicherzustellen, dass das Klicken auf das Ankertag den Benutzer nicht an eine andere Stelle weiterleitet.

Schritt 7b: Das PHP

Denken Sie daran, wir haben unsere PHP-Seite 'updateEntry' mit jQuery aufgerufen, aber noch nicht erstellt! Lass uns das jetzt machen. Erstellen Sie eine neue Seite mit dem Namen "updateEntry.php" und fügen Sie Folgendes ein.

 
<?php 
 
require_once 'db.php'; 
$db = new Db(); 
$response = $db->update_by_id($_POST['id'], $_POST['description']); 
 
?>

Nach wie vor verweisen wir auf unsere Datenbankklasse und instanziieren sie dann. Als Nächstes erstellen wir eine neue Variable mit dem Namen $response und machen sie gleich dem, was von der Methode "update_by_id()" zurückgegeben wird. Wir haben diese Methode noch nicht erstellt. Jetzt ist ein guter Zeitpunkt dafür.

Hinzufügen einer neuen Methode zu unserer Klasse

Kehren Sie zu Ihrer db.php-Seite zurück und fügen Sie unten eine neue Methode hinzu.

 
function update_by_id($id, $description) { 
	$query = "UPDATE todo  
	          SET description = ?  
		  WHERE id = ? 
	          LIMIT 1"; 
		   
	if($stmt = $this->mysql->prepare($query)) { 
		$stmt->bind_param('si', $description, $id); 
		$stmt->execute(); 
		return 'good job! Updated'; 
	} 
}

Diese Methode akzeptiert zwei Parameter: die ID und die Beschreibung des Elements. Wenn wir diese Methode aufrufen, müssen wir daran denken, diese beiden Parameter zu übergeben! Wir beginnen mit der Erstellung unserer Abfrage: Aktualisieren Sie die "todo" -Tabelle und ändern Sie die Beschreibung in das, was übergeben wird. Aktualisieren Sie jedoch nur die Zeile, in der die ID dem übergebenen Parameter entspricht.

Wie beim letzten Mal werden wir vorbereitete Anweisungen verwenden, um unsere Datenbank zu aktualisieren. Es ist der sicherste Weg! Bereiten Sie unsere Abfrage vor, binden Sie die Parameter (Zeichenfolge und Ganzzahl oder 'si') und führen Sie sie aus. Wir geben eine generische Zeichenfolge zurück, die jedoch überhaupt nicht erforderlich ist. Jetzt sollte unser Update einwandfrei funktionieren!

Schritt 8: Elemente löschen

Lassen Sie uns auch eine schöne asynchrone Möglichkeit für den Benutzer erstellen, Einträge zu löschen. Wenn sie auf die Schaltfläche "Löschen" für ein Element klicken, wird das Div ausgeblendet und die Datenbank aktualisiert, um das Löschen widerzuspiegeln. Öffnen Sie Ihre Javascript-Datei und fügen Sie Folgendes hinzu:

 
	// Delete anchor tag clicked 
	$('a.deleteEntryAnchor').click(function() { 
		var thisparam = $(this); 
		thisparam.parent().parent().find('p').text('Please Wait...'); 
		$.ajax({ 
			type: 'GET', 
			url: thisparam.attr('href'), 
			 
			success: function(results){ 
				thisparam.parent().parent().fadeOut('slow'); 
			} 
		}) 
		return false; 
	});

Dekodierung

1
2	$('a.deleteEntryAnchor').click(function() {

Wenn Sie auf das Ankertag mit der Klasse "deleteEntryAnchor" klicken, führen Sie eine Funktion aus.

1
2	var thisparam = $(this);

Cache $(this) als thisparam.

1
2	thisparam.parent().parent().find('p').text('Please Wait...');

Ändern Sie den Text der Beschreibung in "Bitte warten". Wir müssen dies tun, um dem Benutzer ein Feedback zu geben, nur für den Fall, dass es länger dauert als erwartet.

 
$.ajax({ 
	type: 'GET', 
	url: thisparam.attr('href'), 
			 
	success: function(results){ 
		thisparam.parent().parent().fadeOut('slow'); 
	} 
})

Wie beim letzten Mal übergeben wir einige Parameter, die auf "delete.php" zugreifen. Anstatt die Seite im Wert der URL fest zu codieren, greife ich auf attr ('href') zu - was gleich 'delete.php?id=$id' ist.

1
2	<a class="deleteEntryAnchor" href="delete.php?id=$id">D</a>

Wir benötigen keinen "DATA" -Parameter, da sich alle entsprechenden Informationen im Querystring der URL befinden. Sobald das Löschen erfolgreich durchgeführt wurde, finden wir das übergeordnete '.item' div und blenden es langsam aus.

Delete.php

Wir haben unsere Löschseite mit jQuery aufgerufen, aber das PHP noch nicht erstellt. Erstellen Sie Ihre neue Seite und fügen Sie den folgenden Code hinzu.

 
<?php 
 
require 'db.php'; 
 
$db = new Db(); 
$response = $db->delete_by_id($_GET['id']); 
header("Location: index.php");

Sie sollten jetzt an diese Verfahren gewöhnt sein. Erstellen Sie eine neue Instanz unserer Klasse und rufen Sie die Methode "delete_by_id" auf. Wenn dies erfolgreich abgeschlossen wurde, leiten Sie den Benutzer zurück zu "index.php". Wie Sie vielleicht vermutet haben, müssen wir innerhalb unserer Datenbankklasse eine neue Methode erstellen. Kehren Sie zu db.php zurück und fügen Sie Ihre neue Funktion hinzu.

Delete_by_id() Methode

 
function delete_by_id($id) { 
	$query = "DELETE from todo WHERE id = $id"; 
	$result = $this->mysql->query($query) or die("there was a problem, man."); 
	 
	if($result) return 'yay!'; 
}

Diese Methode akzeptiert einen Parameter - die ID. Denken Sie daran: Um eine Zeile zu aktualisieren, MÜSSEN wir die eindeutige ID dieser Zeile kennen. Andernfalls wird jede Zeile aktualisiert. Wir löschen alle Zeilen aus der Tabelle, wobei die ID der übergebenen entspricht. Da jede Zeile eine eigene eindeutige ID hat, ist nur eine betroffen. Als nächstes übergeben wir diese Abfrage an unser MySQL-Objekt. Auch hier ist die Rückgabe nicht erforderlich; es ist nur zum Spass.

Schritt 9: Extra jQuery

Wir haben alle unsere PHP-Arbeiten beendet! Der letzte Schritt besteht darin, ein bisschen jQuery hinzuzufügen, damit alles ein bisschen besser funktioniert. Fügen Sie oben in Ihrer Javascript-Datei direkt nach der document.ready-Methode den folgenden Code hinzu:

 
	// Don't display the addNewEntry tab when the page loads.  
	$('#addNewEntry').css('display', 'none'); 
	 
	// We're using jQuery to create our tabs. If Javascript is disabled, they won't work. Considering 
	// this, we should append our tabs, so that they won't show up if disabled. 
	$('#tabs').append('<li id="newitem_tab"><a href="#">New Item</a></li>'); 
	 
	// Hide the description for each to-do item. Only display the h4 tag for each one. 
	$('div.item').children().not('h4').hide(); 
	 
	// The entire item div is clickable. To provide that feedback, we're changing the cursor of the mouse. 
	// When this div is clicked, we're going to toggle the display from visible to hidden each time it's clicked. 
	// However, when the user clicks the "update" button, the div will close when they click inside the textarea 
	// to edit their description. This code detects if the target of the click was the textarea. If it was, 
	// we do nothing. 
	$('div.item').css('cursor', 'pointer').click(function(e) { 
		if (!$(e.target).is('textarea')) { 
			$(this).children().not('h4').slideToggle(); 
			$(this).children('h4').toggleClass('expandDown'); 
		} 
	});

Ich habe jeden Schritt ziemlich gut kommentiert. Also werde ich mich nicht wiederholen. Ihre endgültige Datei scripts.js sollte folgendermaßen aussehen.

 
$(function() { 
	// Don't display the addNewEntry tab when the page loads.  
	$('#addNewEntry').css('display', 'none'); 
	 
	// We're using jQuery to create our tabs. If Javascript is disabled, they won't work. Considering 
	// this, we should append our tabs, so that they won't show up if disabled. 
	$('#tabs').append('<li id="newitem_tab"><a href="#">New Item</a></li>'); 
	 
	// Hide the description for each to-do item. Only display the h4 tag for each one. 
	$('div.item').children().not('h4').hide(); 
	 
	// The entire item div is clickable. To provide that feedback, we're changing the cursor of the mouse. 
	// When this div is clicked, we're going to toggle the display from visible to hidden each time it's clicked. 
	// However, when the user clicks the "update" button, the div will close when they click inside the textarea 
	// to edit their description. This code detects if the target of the click was the textarea. If it was, 
	// we do nothing. 
	$('div.item').css('cursor', 'pointer').click(function(e) { 
		if (!$(e.target).is('textarea')) { 
			$(this).children().not('h4').slideToggle(); 
			$(this).children('h4').toggleClass('expandDown'); 
		} 
	}); 
	 
	// add new item tab click  
	 
	$('#tabs li').click(function() { 
		$('#tabs li').removeClass('selected'); 
 
		$(this).addClass('selected'); 
		 
		if($(this).attr('id') == 'newitem_tab') { 
			$('#todo').css('display', 'none'); 
			$('#addNewEntry').css('display', 'block');			 
		} else { 
			$('#addNewEntry').css('display', 'none'); 
			$('#todo').css('display', 'block'); 
		} 
		return false; 
	}); 
	 
	$('#todo div:first').children('h4').addClass('expandDown').end().children().show(); 
	 
	// Delete anchor tag clicked 
	$('a.deleteEntryAnchor').click(function() { 
		var thisparam = $(this); 
		thisparam.parent().parent().find('p').text('Please Wait...'); 
		$.ajax({ 
			type: 'GET', 
			url: thisparam.attr('href'), 
			 
			success: function(results){ 
				thisparam.parent().parent().fadeOut('slow'); 
			} 
		}) 
		return false; 
	}); 
	 
// Edit an item asynchronously 
	 
$('.editEntry').click(function() { 
	var $this = $(this); 
	var oldText = $this.parent().parent().find('p').text(); 
	var id = $this.parent().parent().find('#id').val(); 
	console.log('id: ' + id); 
	$this.parent().parent().find('p').empty().append('<textarea class="newDescription" cols="33">' + oldText + '</textarea>'); 
	$('.newDescription').blur(function() { 
		var newText = $(this).val(); 
		$.ajax({ 
			type: 'POST', 
			url: 'updateEntry.php', 
			data: 'description=' + newText + '&id=' + id, 
			 
			success: function(results) { 
				$this.parent().parent().find('p').empty().append(newText); 
			} 
		}); 
	}); 
	return false; 
}); 
 
});

Schritt 10: Warten Sie! Das Layout ist in IE6 seltsam.

Wir können es noch keinen Tag nennen! Dieser lustige alte Internet Explorer 6 verursacht einige Layoutprobleme.

Die Hintergrund-PNGs sind 24 Bit. IE6 unterstützt dies nicht von Haus aus. Wir müssen ein Skript importieren, um es zu beheben.
Die Navigationsregisterkarten werden nicht an der richtigen Stelle angezeigt.
Jedes div.item wird beim Erweitern nicht richtig angezeigt.
Unsere Schaltflächen zum Bearbeiten und Löschen befinden sich zu weit rechts von unserem div.

Die Lösung

Obwohl wir das gerne möchten, können wir diesen Browser noch nicht ignorieren. Glücklicherweise werden Sie feststellen, dass die meisten IE6-Probleme recht einfach behoben werden können. Zuerst müssen wir ein Skript importieren, das unser Alpha-Transparenzproblem behebt. Dean Martin hat eine fantastische Javascript-Datei, die IE6 auf Standardkonformität bringt. Durch einfaches Hinzufügen von "-trans" am Ende unserer 24-Bit-PNG-Dateinamen können wir unser Problem beheben. Besuchen Sie unbedingt den Bilderordner und bearbeiten Sie die Namen.

 
<!--[if lt IE 7]> 
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> 
	<link rel="stylesheet" href="css/ie.css" /> 
<![endif]-->

Googles CDN hilft erneut, indem es eine gehostete Version des IE7-Skripts bereitstellt. Das behebt unser Transparenzproblem, aber wir haben noch ein paar Macken.

Beachten Sie, dass wir in unserer bedingten Anweisung auch eine "ie.css" -Datei importiert haben. Erstellen Sie diese Datei jetzt und fügen Sie Folgendes ein:

 
body { 
margin: 0; padding: 0; 
} 
 
#tabs { 
height: 100%; 
 
} 
 
#main { 
height: 100%; 
} 
 
#main div.item { 
width: 100%; 
overflow: hidden; 
position: relative; 
}

Sie werden feststellen, dass durch Hinzufügen von "position: relative", "overflow: hidden" und "height: 100%" 90% Ihrer IE6-Probleme behoben werden. Jetzt funktioniert unser Layout in allen Browsern perfekt!

Du bist fertig!

Hier gab es viel zu berichten. Hoffentlich habe ich mich gründlich genug erklärt. Wenn nicht, ist der zugehörige Screencast dafür gedacht! Überprüfen Sie es unbedingt, um verschwommene Bereiche zu entfernen. Wenn Sie noch Fragen haben, fragen Sie mich einfach! Vielen Dank fürs Lesen.