Webentwicklung verstehen: Ein Leitfaden für Anfänger:innen im Web

1. Einführung in „Webentwicklung verstehen“: Hallo und willkommen zu meiner ersten Skillshare Klasse, Verständnis für Web-Entwicklung. Ich bin Chris. Ich bin Autodidakt Webentwickler und Content-Creator, der seit 2015 als Freelancer für Startups und kleine Unternehmen tätig ist. Ferne habe ich diese Fähigkeit nutzen können, um von Standorten auf der ganzen Welt und für eine Vielzahl von Kunden zu arbeiten . Ich bin ein großer Gläubiger an die Macht, Code zu lernen und ich freue mich, mit Ihnen zu teilen, was ich glaube die wichtigsten Dinge sind, die Sie wissen müssen, um zu verstehen wie das Web funktioniert und wie Sie sich dafür entwickeln können. In dieser Klasse werden wir einige der wichtigsten Konzepte diskutieren, die hinter der Entwicklung für das Web stehen, einschließlich: Eine, die Sie mit der Funktionsweise des Web vertraut machen, zwei lernen den Unterschied zwischen Front-End- und Back-End-Entwicklung, und drei zeigen, Sie, wie Sie Ihre eigene Website im Internet bereitstellen. Wir werden auch einige der Tools und Sprachen, die für die Web-Entwicklung notwendig sind, einschließlich HTML, CSS und JavaScript, PHP und MySQL, und Frameworks wie Bootstrap und Jquery. Mein Ziel für diese Klasse ist, dass Sie am Ende ein breites Verständnis der Web-Entwicklung haben und sich klar werden, wie Sie diese wichtige Fähigkeit der Web-Entwicklung in Ihrer beruflichen Karriere oder für den persönlichen Gebrauch nutzen möchten . Also, wenn Sie bereit sind, um loszulegen, klicken Sie auf das nächste Video und ich sehe Sie auf der Innenseite. 2. Was du im Kurs erwarten kannst: Also in dieser Klasse werde ich einen Überblick über die Web-Entwicklung geben und Ihnen einen Vorgeschmack auf die Entwicklung von HTML, CSS, JavaScript, PHP und MySQL geben und Ihnen dabei helfen, Ihre Website im Internet bereitzustellen. Am Ende der Klasse sollten Sie in der Lage sein, den Unterschied zwischen Front-End und Back-End, den Zweck von HTML, CSS und JavaScript zu verstehen , was ein Framework ist und warum Sie eines verwenden sollten, den Zweck von PHP und MySQL der Unterschied zwischen einem Domain-Namen und Hosting, und schließlich, wie Sie Ihre Website im Internet veröffentlichen. Es ist meine Überzeugung, dass Web-Entwicklung am besten durch das Tun gelernt wird, und so wird diese Klasse sehr praktisch und nicht rein theoretisch sein. Sie werden lernen, was HTML, CSS, JavaScript und PHP sind, indem Sie sie tatsächlich verwenden. Das Ziel am Ende dieser Klasse ist, dass Sie ein gutes Verständnis für das Web und den Web-Entwicklungsprozesshaben ein gutes Verständnis für das Web und den Web-Entwicklungsprozess Danach sind Sie in einer besseren Position, um zu wählen , über welchen Bereich der Web-Entwicklung Sie mehr erfahren möchten. also ohne weiteres Lassen Sie unsalso ohne weiteresmit der ersten Lektion beginnen, die Web-Entwicklung zu verstehen. 3. So kannst du eine Seite im Web bearbeiten: Um diesen Kurs zu beginnen, möchte ich Ihnen etwas Cooles zeigen, das Sie vielleicht nicht realisiert haben. Dies wird dazu beitragen, den Unterschied zwischen Front-End und Back-End in einer realen Umgebung zu demonstrieren , bevor wir in die Theorie kommen. Für diese Demo verwende ich einen Browser namens Google Chrome. Es ist diejenige, die ich als Verbraucher und regelmäßig als Webentwickler verwende. Aber du könntest Firefox benutzen, ich hier auch offen habe, und Safari. Sie können ähnliche Dinge tun, so ziemlich dasselbe, nur mit etwas anderen Tools in einem dieser Browser. Ich zeige Ihnen, wie Sie das in nur einer Sekunde machen können. Aber gehen wir zurück zu Chrome und gehen wir zu Google.com. Jetzt können Sie dieses kleine Experiment auf jeder Website überhaupt machen. Aber ich dachte nur, wir würden gehen, wenn eine Website, die wir alle kennen, und das ist Google.com. Nun ein wenig bekanntes Geheimnis, das Sie vielleicht nicht bereits wissen, ist, dass Sie praktisch jede Webseite direkt in Ihrem Browser bearbeiten können. Alles, was Sie in Chrome tun müssen, ist mit der rechten Maustaste auf ein beliebiges Element. Ich klicke hier mit der rechten Maustaste auf diese Schaltfläche und klicke auf Inspect. Ich habe das ein bisschen schnell gemacht. Klicken Sie mit der rechten Maustaste, wählen Sie Überprüfen Was dies öffnet sich auf der Seite hier ist die Google Chrome Developer Tools. Wenn wir in Firefox gehen und das Gleiche tun, Google Chrome. Ich habe nur Google.com. Gehen Sie auch auf Safari zu Google. Auf Firefox können wir genau das Gleiche tun. Wir können Element inspizieren, und es bringt eine ähnliche Konsole hier unten. Auf Safari müssen Sie zu Einstellungen wechseln und Entwicklertools aktivieren. Sie gehen nach unten, um auf Erweitert zu klicken, gehen Sie nach unten zu Show Development Menü in der Menüleiste. Dann von hier, ich bin mir nicht sicher, was Sie klicken. Ich denke, zeigen Sie Web Inspector und Sie können ähnliche Dinge sehen. Es ist eine ähnliche Sache in allen Web-Browsern oder den großen Web-Browsern. Aber wie ich bereits sagte, verwende ich gerne Chrome. Was Sie hier tun können, ist das alles HTML und das ist alles CSS. Wenn wir in die Konsole gehen, können wir direkt mit der Seite mit JavaScript interagieren. Aber lass uns dich jetzt nicht überwältigen, wenn du gerade erst anfährst. Alles, was ich Ihnen zeigen möchte, ist, dass dies vollständig editierbar ist. Sie können hier diesen Wert sehen. Ich klicke ihn ab und klicke dann erneut ein. Nur wenn ich auf diesen Wert doppelklicke, kann ich diesen Wert jetzt bearbeiten. Sie sehen hier, es sagt Google-Suche hier, es sagt Google-Suche dort. Ich kann das in alles ändern, was ich will. Vielleicht sage ich meine Suche, und Wallah, Sie können den Text darauf ändern. Wenn Sie das Styling ändern wollten, was mit CSS gemacht wird, kann ich hier mit Element-Stil hinuntergehen, und ich kann Farbe eingeben, und ich kann durch all diese verschiedenen Farben blättern. Ich kann es buchstäblich färben, was ich will. Lasst uns Schokolade benutzen. Nur weil das lustig klingt. Ich kann sogar Elemente löschen. Ich klicke darauf und drücke die Entf-Taste. Bumm, es ist weg. Aber bevor Sie wirklich aufgeregt werden und denken: „Wow, ich ändere die Homepage von Google,“ wie wird das alle anderen beeinflussen, die Google verwenden? Klicken Sie auf die Schaltfläche „Neu laden“ und Sie werden sehen, dass Google genau so herauskommt, wie es vorher war. Das liegt daran, dass wir gerade das Frontend bearbeiten. Wenn Sie auf „Neu laden“ drücken oder zurück zu Google gehen, sendet es eine weitere Anfrage an den Server und trifft auf das Backend. Google verwendet jede komplexe Logik, die sie im Backend haben , um zu bestimmen, was hier angezeigt wird. Alles, was Sie hier ändern, ist nur in Ihrem Browser und nicht wirklich bei Google. Aber das, wie Sie am Ende des Kurses sehen werden, ist super mächtig. Um auf Ihren eigenen Websites zu arbeiten, können Sie alles am Front-End überprüfen, es im Grunde live ändern, und dann können Sie herausfinden, wie Sie das in Ihrem Code-Editor oder was auch immer tun. Der Grund, warum ich Ihnen das gerade nach oben zeigen wollte, ist, weil ich denke, dass dies eine praktische Möglichkeit ist physisch zu demonstrieren, wie das Web funktioniert oder besser gesagt, wie das Frontend funktioniert, weil Sie mit interagieren können, ich einfach gedrückte Option Befehl I auf Mac. Wenn Sie Mac ausführen und Chrome verwenden, um Entwicklertools zu öffnen, können Sie mit jeder Webseite im Internet interagieren, alle Front-End-Assets, die HTML, das CSS, das JavaScript, die wir später bekommen. Es zeigt Ihnen leider nicht das Backend, weil das alles privat ist, aber wir werden herausfinden, warum das Backend privat ist und wie wir in diesem Kurs auch mit dem Backend arbeiten. Was ich im nächsten Video machen werde, ist, direkt in die Theorie einzutauchen, die ein bisschen schwer ist, weshalb ich dieses Video zuerst machen wollte. Dann werden wir in einen echten Code kommen. Ich hoffe, das war eine coole kleine Demo, und lassen Sie uns jetzt Theorie in der nächsten Lektion sprechen. 4. Front-End vs. Back-End: Wahrscheinlich das wichtigste Konzept zum Verständnis der Webentwicklung, ist die Idee zwischen Front-End und Back-End. Um dies zu erklären, möchte ich ein Diagramm von Felix Thea verwenden. Ich gehe zu felixthea.com/frontend-vs- Backend. Am Ende dieses Artikels finden Sie das Diagramm. Was wir im ersten Video gesehen haben, war, dass ich mit dem, was man das Frontend nennt, interagiere. Wie Sie sehen können, wird der Frontend-Code immer in HTML, CSS und JavaScript geschrieben. Der Frontend-Code ist im Grunde, was dazu kommt, Ihrem Browser zu geben , um zu erstellen, was Sie sehen und mit in Ihrem Browser interagieren. Der Grund, warum der Code auf dem Frontend immer HTML, CSS und JavaScript ist, ist, weil wir alle ähnliche Webbrowser wie Chrome, Safari und Firefox verwenden . Internationale Standards mussten entwickelt werden, damit sich die Entwickler einig sind , welche Technologien die Websites bilden, die wir sehen und mit denen wir interagieren. Das Frontend ist jedoch nur die Spitze des Eisbergs, da das Backend unendlich komplexer sein kann. Die Rolle des Backends besteht darin, das Frontend zu erzeugen, aber auf eine viel intelligentere Art und Weise. Kehren wir zu unserem Beispiel im ersten Video zurück. Was passiert, wenn wir nach dem Bearbeiten der Seite auf „Reload“ klicken? Die Veränderungen verschwinden, oder? Nun, natürlich, das macht Sinn. Google wird uns nicht ihre Website ändern lassen, aber was passiert eigentlich, wenn wir auf diese Schaltfläche „Neu laden“ klicken? Die Antwort ist, dass wir eine neue Anfrage an den Server erstellen. Wenn wir diese Anfrage stellen, führt das Backend eine beliebige Anzahl von einfachen oder komplexen Berechnungen aus und sendet dann an den Browser HTML, CSS und JavaScript. Diese drei Skripte werden dann von Ihrem Browser interpretiert , um die Website zu generieren, die Sie sehen und mit der Sie interagieren. Im Google-Beispiel kann das Backend Nummer 1 berechnen, welchem Land aus Sie auf die Website zugreifen. Nummer 2, unabhängig davon, ob Sie eingeloggt oder abgemeldet sind. Was auch immer Berechnungen Google auf dem Backend durchführen kann, ist völlig privat. Der Backend-Code schafft es nie zu Ihrem Browser, und daher gibt es keine Möglichkeit, ihn anzuzeigen. Im Gegensatz zum Frontend kann das Backend einer Website mit beliebigen Programmiersprachen oder Technologien generiert oder erstellt werden. Ihr Browser benötigt immer HTML, CSS und JavaScript, aber es ist nicht wirklich wichtig, wie es dorthin kommt. Es kümmert sich nur, dass der Code auf dem Frontend lesbar ist. Davon abgesehen, gibt es ein paar beliebte Entscheidungen, die die Macht die meisten der Web. Dies sind PHP, Ruby, Python, Java, C# und C++. Kehren wir zum Diagramm zurück. Wir haben über das Frontend und das Backend gesprochen, aber es gibt einen anderen Punkt der Interaktion hier, und das ist die Datenbank. In der Datenbank werden die Daten gespeichert. diesem Beispiel im Diagramm kann ein Benutzer auf eine Schaltfläche klicken, um auf eine Fotogalerie zuzugreifen. Die Anfrage wird dann an das Backend gesendet, das dann die Datenbank abfragt und dann die Datenbank die Fotoinformationen an das Backend zurückgibt. Dann bestimmt das Backend, was an den Browser gesendet werden soll. Wenn jetzt alles Sinn macht, großartig, aber wenn nicht, bedenken Sie, dass Sie anfangen, besser zu verstehen sobald Sie direkt mit dem Backend und Frontend zu arbeiten, und sobald wir in irgendeinem Code sind, aber um diesen Abschnitt zu beenden, wollte ich nur ein letztes Beispiel teilen, das in der Webentwicklung ziemlich üblich ist, und es ist ein Prozess namens Authentifizierung. Nun, Authentifizierung ist etwas, auf das Sie wahrscheinlich ständig stoßen. Es ist nur ein schickes Wort, um jemanden anzumelden und jemanden von einer Website oder einer App abzumelden. Wenn ein Benutzer authentifiziert ist, bedeutet dies nur, dass er in der Lage war, sich selbst zu identifizieren und sich auf der Website anzumelden. Authentifizierung beinhaltet immer oder sollte immer das Backend beinhalten, da Benutzerinformationen immer privat gespeichert werden sollten und mit der Datenbank interagieren sollten. Denken Sie daran, dass alles auf dem Backend, einschließlich der Datenbank, für den Benutzer nicht sichtbar ist. Nur das, was an das Frontend geliefert wird, kann eingesehen und mit ihm interagiert werden. Im Falle der Authentifizierung der Benutzer Nummer 1 ihren Benutzernamen und ihr Kennwort ein und klickt dann auf „Enter“. Nummer 2, werden die Informationen dann an das Backend gesendet, das die Datenbank abfragt, um zu sehen, ob eine, der Benutzername in einer Datenbank vorhanden ist und zwei, ob das Passwort mit dem übereinstimmt, was für diesen Benutzer gespeichert ist. Nummer 3, wenn beide Bedingungen übereinstimmen, entscheidet das Backend, dass dem Benutzer Zugriff gewährt werden soll und erklärt in Zusammenarbeit mit dem Frontend den Benutzer als angemeldet. Siehst du jetzt, wie das Frontend und das Backend interagieren? Seien wir ehrlich, ich könnte so viel mehr Theorie auf Sie werfen, aber Web-Entwicklung wird am besten durch das Tun gelernt. Lassen Sie uns im nächsten Video in einen Code springen. daran, dass Sie nicht alles super klar haben müssen , um in den nächsten Abschnitt zu springen. Dies ist alles Theorie, die so viel mehr Sinn ergibt, wenn wir tatsächlich in irgendeinen Code kommen. Schauen Sie sich einfach dieses Video an, wenn Sie müssen, aber wissen Sie, dass, sobald wir diesen Kurs durchlaufen haben, die Konzepte, über die wir in dieser Lektion gesprochen haben, klarer werden. Lassen Sie uns in einige HTML im nächsten Video springen. 5. HTML: Lassen Sie uns direkt in einige HTML eintauchen. Dafür brauchen wir einen, einen Code-Editor. Wenn Sie Windows verwenden, können Sie einfach Editor öffnen und Editor realistisch verwenden. In Mac würde ich nicht unbedingt empfehlen, Textbearbeitung zu verwenden, daher würde ich empfehlen, einen kostenlosen Code-Editor herunterzuladen. Der, den ich benutze, heißt Atom. Sie können es einfach finden, indem Sie zu atom.io gehen und es herunterladen. Es ist wirklich, wie Sie sehen können, ziemlich schlank und schön zu arbeiten. Ich habe natürlich meinen Browser geöffnet. Wir brauchen einen Web-Browser, um unser aktuelles Projekt zu sehen. Was Sie auch brauchen werden, ist ein Projektordner, den ich hier eingerichtet habe. Was Sie zuerst tun werden, ist auf diese Seite zu gehen, um uns ein wenig von einer Vorlage zu bekommen, einen Ausgangspunkt für ein grundlegendes Projekt. Sie können dies in Google eingeben, ich bin sicher, es wird kommen oder ich kann den Link irgendwo einfügen. Sie scrollen einfach hier nach unten und Sie können dies kopieren. Ich werde das kopieren, gehen Sie zu dieser Datei und fügen Sie sie ein. Der Grund, warum wir nicht die schöne Färbung haben, wie es hier für die verschiedenen Teile hat, ist, weil unser Code-Editor hier, Atom nicht weiß, welche Art von Datei das ist. Es ist immer eine gute Idee, unser Projekt sowieso sofort zu speichern. Gehen wir zu Datei, klicken Sie auf „Speichern unter“, und in unserem Projektverzeichnis werden wir es benennen. Sie können es benennen, was Sie wollen, nur solange es has.HTML am Ende. Sie könnten es mit einer anderen Erweiterung wie TXT benennen, aber dann wissen Ihr Browser und Ihr Code-Editor nicht, dass es sich um HTML handelt. Für eine Homepage einer Website ist es normalerweise index.php und das ist aus einigen Gründen, auf die wir später eingehen könnten. Aber jetzt nennen wir es einfach index.html. Ich werde das nur schließen. Plötzlich haben Sie Färbung, weil Atom weiß, dass es HTML ist, und plötzlich haben Sie Ihr Projekt auch hier. Sobald wir weitere Dateien hinzugefügt haben, wird dies wichtig, weil wir in die anderen Dateien gehen, darauf klicken und sie bearbeiten können . Nur allgemeine Navigation. Was wir jetzt tun werden, wo wir eine HTML-Datei haben, ist es zu sehen. Es gibt ein paar Möglichkeiten, es zu tun. Der einfachste Weg ist, einfach mit der rechten Maustaste darauf zu klicken und auf Öffnen mit zu klicken. Chrome ist die Standardanwendung auf meinem Computer zum Öffnen von HTML, also kann ich einfach darauf klicken und bam, es kommt auf. Nun, du denkst vielleicht , wir haben gerade einen weißen Bildschirm. Woher wissen Sie, dass es erfolgreich ist Chris? Woher ich es wirklich weiß, ist hier oben. Hier oben steht der HTML5 Herald, was wir in diesem Titel-Tag hier oben haben, der HTML5 Herald. Wenn wir dies ändern, ändern wir dies einfach in mein HTML-Projekt und klicken Sie auf mein HTML-Projekt „Speichern“. Ich benutze nur Command S auf einem Mac, aber Sie können so speichern, oder was auch immer Verknüpfung es ist. Dann klicken wir auf unseren Browser, wir klicken auf „Reload“ oder Befehl R, und wir können sehen, dass der Titel der Seite jetzt geändert wird. Wir könnten in diesem Kurs eine zweistündige Serie über HTML machen, aber ich möchte euch nur einen Überblick geben. Es gibt viele Informationen hier, aber die wichtigsten Dinge, die Sie wissen müssen, sind Kopf und Körper. Im Kopfbereich können Sie nicht unbedingt auf der Seite sehen, was im Kopf passiert, aber es hat ein paar wichtige Tags, die hier eingehen. Hier können Sie Links zu externen Dateien erstellen. Dieses gibt es noch nicht, es ist nur in der Vorlage. Hier gibt es Meta-Informationen, die für SEO wichtig sind. Da ist der Titel, mit dem wir bereits interagiert haben, und es gibt andere Dinge, die Sie auch hier einfügen können. Aber das body-Tag ist, wo Sie Dinge einfügen die im eigentlichen Körper Ihres HTML-Dokuments Ihrer Webseite angezeigt werden. Ein paar Grundelemente, die wir in unserem Körper setzen können, ist ein div. Was im Grunde nur ein Block ist, und es gibt uns nur eine Möglichkeit, unseren Code zu organisieren. Sie können zwei divs einfügen. Übrigens bleibt die Konvention bei HTML immer gleich. Sie machen ein Kleiner-als-Zeichen und dann den Namen des Elements ohne Leerzeichen, dann ein Größer-als-Zeichen, und dann setzen Sie den Inhalt hinein, und am Ende tun Sie genau das gleiche, außer Sie setzen einen Schrägstrich vor den Elementnamen. Wie Sie sehen können, haben wir zwei divs hier. Aber wenn ich auf Speichern klicke, werden wir nichts sehen, weil diese divs nur für die Strukturierung im Grunde sind. Wir werden nichts sehen, es sei denn, wir definieren Stile diese divs oder wir setzen einige Inhalte in sie. Was ich tun werde, ist zu setzen, was soll ich tun? Ein Überschrift-Tag. Die meisten Webseiten beginnen mit einem Überschriften-Tag, und es gibt ein paar Überschriften-Tags, die wir tun können. Es reicht von H1, H2, H3 , H4 bis H6, vielleicht sogar länger. Ich denke, H6 könnte die längste sein. Aber H1 ist eine Überschrift, die die oberste Überschrift sein soll. Normalerweise haben Sie nur ein H1 in einer Webseite und lassen Sie uns einfach diesen Seitentitel nennen. Dann, um dieses Tag zu schließen, wie wir erwähnt haben, genauso wie das, was wir getan haben, um es zu öffnen, haben wir nur einen Schrägstrich davor gesetzt. Ich werde auf „Speichern“ klicken, den gleichen Prozess tun, kommen Sie hierher, laden Sie die Seite und boom, Sie haben einen Seitentitel. Was wir hier tun werden, in diesem div, ist ein p-Tag zu setzen, und p-Tag bedeutet nur Absatz. Es ist, wenn Sie ein bisschen Text einfügen. Ich werde sagen, das ist ziemlich schlecht, aber bla, bla, bla, bla, drücken Sie „Speichern“. Wir haben bla, bla, bla. Es gibt nichts wirklich Besonderes an p-Tags, bis Sie sie zusammensetzen, und dann gibt es Ihnen eine Teilung von Absätzen. Dies ist eine grundlegende Sache, die Sie tun können, um eine Überschrift, Absätze, vielleicht eine andere Überschrift für einen Unterabschnitt zu haben , in dem Sie H2, H2 und sagen Unterabschnitt. Voila. Nur um den Unterschied nach Hause zu fahren, weil diese Divs gerade jetzt nichts tun, werde ich einen Stil anwenden. Wir kommen jetzt ein bisschen in CSS, aber seien Sie nicht gewarnt, haben Sie keine Angst. Was wir hier tun werden, ist, unserem Element ein Attribut zu geben. Wie wir dies tun, ist, dass wir das letzte Zeichen des Elementnamens finden, drücken Sie Leerzeichen, und das Attribut, das wir geben werden, ist Stil. Wir werden in Stil eingeben, gleich offene doppelte Anführungszeichen und schließen doppelte Anführungszeichen. Mein Code-Editor gibt mir bereits die schließenden doppelten Anführungszeichen, weil er weiß, was ich versuche. Geben wir dem eine Grenze, also werde ich Grenze eingeben, ein px, solides schwarz. Setzen Sie ein Semikolon, um zu sagen, dass das Ende der Regel ist, klicken Sie auf „Speichern“, und Sie werden sehen, dass das Feld jetzt einen Rahmen hat, der es tatsächlich sichtbar macht. Was wir hier tun können, ist dieses Style-Tag zu kopieren, es hier zu setzen, drücken Sie „Speichern“, und dann können Sie das zweite div sehen. Divs sind wichtig für die Verschachtelung, wir können diese divs kleiner machen, wir können sie nebeneinander setzen, und das erlaubt uns, die Struktur unserer Seite zu beeinflussen. Wie gesagt, wir könnten Stunden mit HTML verbringen, und es gibt so viele weitere Elemente, die Sie lernen könnten, aber dies ist ein Übersichtskurs. Ich habe dir gerade ein bisschen einen Teaser gegeben. Sie können tief in HTML durch einen anderen Kurs eintauchen, oder vielleicht kann ich einen für Sie erstellen, wenn Sie möchten. Aber das sollte Ihnen einen Hinweis darauf geben, was HTML für Sie tut. Es ist im Grunde der Inhalt Ihrer Webseite und wie sie strukturiert ist. Im nächsten Video gehen wir über CSS, was wir hier ein bisschen Styling gemacht haben. Aber es ist schon Zeit für einige CSS, also werden wir auf das bauen, was wir hier mit etwas Styling gemacht haben. 6. CSS: In dieser Lektion über CSS werde ich uns genau dort anfangen, wo wir im letzten Video aufgehört haben. Was wir hier haben, ist unsere HTML-Datei, und wir haben das Ergebnis unserer HTML-Datei in unserem Browser. Nun, eine Sache, auf die ich Sie hier hinweisen möchte , ist dieser Link zu einem externen Stylesheet. Dies ist eigentlich ein Tag , das kein schließendes Tag hat, da es keinen Inhalt hat. Es hat nur Attribute. Was ich damit meine, ist, dass Sie nicht so gehen müssen , um es zu schließen, weil nichts dazwischen liegt, es ist nur ein Link zu einem externen Stylesheet. Das erste Attribut hier ist rel gleich Stylesheet. Das sagt nur, dass wir im Grunde auf ein Stylesheet verlinken, und href ist nur der Speicherort des Stylesheets. Zuerst ist es alles, bevor die styles.css ein Ordnerpfad ist , also müssen wir einen Ordner namens CSS in diesem Verzeichnis erstellen. Dann müssen wir eine Datei namens styles.css erstellen. Dies ist nur ein zusätzlicher Abfrageparameter, der über die Version spricht. Ich habe das eigentlich nie zuvor verwenden müssen, also lasst uns es einfach aus Einfachheit loswerden. Alles klar, wie ich sagte, wir müssen in unser Projektverzeichnis gehen, wir müssen einen neuen Ordner namens CSS erstellen. Wie Sie sehen können, kommt hier alles, so dass es leicht von unserem Code-Editor aus navigiert werden kann. Ich werde in diesen Ordner gehen. Eigentlich erstelle ich die neue Datei hier nicht. Ich gehe zurück in den Code-Editor und was ich tun kann, ist eine neue Datei im Code-Editor zu erstellen. Bevor wir ein CSS schreiben, werde ich es mit der richtigen Erweiterung speichern , damit unser Code-Editor und unser Browser genau wissen, welche Art von Datei das ist. Wie wir in unserem Link-Tag dort definiert haben, denke ich, es war styles.css, also musst du es einen Punkt CSS nennen. Wir können das immer ändern, was wir wollen. Wir haben es nicht, um Stile zu sein. Wir müssen nur den Link im HTML-Dokument aktualisieren, aber es muss immer in Punkt CSS enden. Also jetzt haben wir unsere Punkt-CSS-Datei. Ja, wie wir sehen können, sollte dies jetzt mit dieser HTML-Datei verknüpft werden, da wir dieses Link-Tag haben und diese Adresse CSS ist. So geht es in den CSS-Ordner. Eigentlich habe ich es mit Großbuchstaben benannt, wenn es vielleicht nicht sein sollte. Jetzt geht es an CSS, dann geht es zu styles.css, die wir dort haben. Jetzt kann ich bereits eine Gelegenheit sehen, eine CSS-Klasse in unserem Dokument zu erstellen. Wo diese Gelegenheit kommt, ist genau hier. Ich habe zwei Divs und ich kopiere und füge Code ein. Dies ist eine gute Lektion für jeden, der Web-Entwicklung macht, zu lernen. Jedes Mal, wenn Sie Code viel kopieren und einfügen, gibt es wahrscheinlich einen viel besseren Weg, dies zu tun. In diesem Fall können wir anstatt bestimmte Stile für jedes dieser divs definieren, einen Klassennamen für beide divs definieren und dann die Stile definieren, die diesen Klassennamen in CSS zugeschrieben werden. Nun, genau wie in HTML, gibt es so viel, was wir mit CSS tun können und es könnte ein zweistündiger Kurs für sich sein. Also werde ich euch in diesem Video nur einen kleinen Vorgeschmack auf CSS geben. Aber was ich hier sehe, ist die große Chance für uns, CSS zu verwenden, um eine Klasse zu erstellen. Nun, um eine Klasse zu erstellen, was wir tun müssen, ist mit einem Punkt zu beginnen. Sie gehen einfach in Ihre CSS-Datei und drücken Punkt. Dann können wir eine Klasse nennen. Ich werde es nur „Box „nennen. Sehr einfacher Name, aber wir brauchen nichts anderes. Jetzt definiert das unsere Klasse im Grunde, aber wir müssen ihr Stile geben, sonst wird es nichts tun. Wir öffnen eine geschweifte Klammer [unhörbar] und M ist bereits eine schließende lockige Klammer für mich generiert. Dann werde ich die Eingabetaste drücken. Was wir tun können, ist, dass wir dorthin zurückkehren können, wo wir diesen Stil definiert haben. Schnappen Sie sich das, stecken Sie es hier rein. Jetzt jedes div oder jedes Element für diese Angelegenheit, wo es einen Rahmen haben kann, jedes Mal, wenn wir diese Klasse darauf setzen, wird es einen Rahmen haben, der ein Pixel breit, solide und schwarz ist. Lasst uns das jetzt machen. Wir werden diese ganze Sache entfernen und statt Stil werden wir Klasse haben. Denken Sie daran, wenn wir in der Klasse die gleiche Konvention wie zuvor mit einem Gleichheitszeichen und zwei doppelte Anführungszeichen setzen, aber wir setzen den Punkt nicht hinein. Wir haben hier die Klasse definiert. In CSS würden wir den Punkt definieren, um sicherzustellen, dass jeder weiß, dass es sich um eine Klasse handelt. Aber hier tippen wir einfach in Box. Was wir tun können, ist das zu kopieren und das durch Box zu ersetzen. Jetzt denken Sie vielleicht, dass wir nicht so viele Charaktere gerettet haben. Aber sobald Sie anfangen, Haufen von Stilen zu generieren, wie vielleicht möchten Sie hier und all das Zeug eine Min-Höhe einfügen. Wir wollen keine dieser Änderungen kopieren und einfügen, ist nur ein sehr viel besser organisiertes System, um Klassen zu haben. Diese alle erben die gleichen Stile, die wir hier definiert haben. Wenn ich das gebe, wird ein wirklich offensichtliches wie 500 super offensichtlich sein. Jetzt sehen Sie alle divs mit dem Klassennamenfeld, das wir Boxen nennen könnten, wird eine minimale Höhe von 500 sein. Ich werde nachladen und bam, jetzt wird alles mit einer Klassenbox 500 sein. Es gibt ein paar andere Möglichkeiten, wie Sie Elemente darin auch anvisieren können. Wenn Sie auf jedes Element zielen möchten, geben Sie einfach den Namen des Elements p ein. Dies wird einen Stil für jedes p Element erstellen. Ich werde nur Farbe gehen. Diese Styling-Regeln, Sie werden sie nicht alle sofort kennen, Sie lernen sie einfach im Laufe der Zeit. Magst du nicht, oh, wie änderst du die Textfarbe? Wie änderst du das? Buchstäblich nur Google es. Es ist nur ein Memory-Spiel für viele dieser Dinge. Setzen Sie in einen Raum dort, und lassen Sie uns Farbe blau machen. Jetzt können Sie sehen, dass jedes Absatz-Tag nun diese Farbe blau haben wird. Was wir hier hätten tun können, ist nur div zu gehen und jedes div hätte das gehabt, also wird das auf jedes div zielen. Aber wenn wir einige divs haben wollen, die nicht die Stile und einige divs haben, die dies nicht tun. Es ist besser, spezifisch zu sein und einen Klassennamen einzugeben. Jetzt ist die andere, die wir haben, eine ID und das ist mit einem Hash definiert. Eine ID sollte nur einem Element übergeben werden. Wir werden einen wirklich spezifischen Namen wie box1 haben. Was sollen wir hier tun? Lassen Sie uns eine Hintergrundfarbe von Schwarz geben. Versuchen wir es einfach. Es wird nicht die schönste Website sein, aber Sie bekommen die Nachricht. Nun, was wir hier tun müssen, ist eine dieser Boxen zu geben, die ID. Das ist nur eine einfache Angelegenheit von ID gleich box1. Das ist richtig. Box1 ohne den Hash, da wir ihm bereits seinen Attributnamen gegeben haben. Geh hier rein und schwarz. Nun, offensichtlich haben wir jetzt ein anderes Problem, das ist, dass die Textfarbe auch schwarz ist, so dass Sie es nicht sehen können. Wenn wir einen schwarzen Hintergrund haben, versteht sich von selbst, dass wir etwas Kontrast im Text benötigen , damit wir Farbe in Weiß ändern können. Jetzt auf die Gefahr, in etwas zu gehen, das ein wenig komplizierter ist, ist mehr mobile Reaktionsfähigkeit in der heutigen Zeit und Zeitalter der Web-Entwicklung sehr wichtig. Die Art und Weise, wie Sie Stile basierend auf der Bildschirmgröße definieren können, ist die Verwendung von Medientags. Jetzt springe ich hier ein paar Schritte voraus, weil wir kaum gerade die Oberfläche mit CSS zerkratzt haben, aber ich wollte dir nur geben, wenn du diesen Abschnitt erreichst, wie mache ich meine Website reaktionsschnell? Es ist durch Medientags. Sie können, auf Medien-Bildschirm. Dann definieren Sie. Auch hier werde ich nicht viel Zeit damit verbringen. Ich zeige Ihnen nur ein Beispiel, maximale Breite, 500 Pixel. Dann öffnen wir die geschweiften Klammern und dann müssen wir noch eine Sache hier reinlegen. Die andere Sache mit CSS ist, je spezifischer die Regel ist, desto mehr wird sie eine andere Regel außer Kraft setzen. Sagen wir zum Beispiel, wir sind hier oben, waren nicht sehr spezifisch hier, wir sagen nur, dass alle P's blau sind. Wenn ich genauer bin und diese maximale Breite 500 des Bildschirms sage, kann ich eine andere Regel eintragen. Wenn der Bildschirm weniger als 500 Pixel breit ist, wird diese Regel hier oben außer Kraft gesetzt. Stattdessen werde ich es rot machen. Ich werde die Seite neu laden und Sie können nichts anderes sehen. Aber wenn ich gehe und die Größe des Fensters ändere, sieh dir das an. Plötzlich, mit 500, ändert sich der Text in rot. Das ist nicht so praktisch für eine Anwendung, aber Sie können das Konzept verstehen, zumindest dass Medienabfragen es Ihnen ermöglichen, das Styling Ihrer Webseite basierend auf der Größe des Bildschirms zu ändern. Alles klar, so hoffentlich erklärt das CSS ein wenig. Auch hier können Sie viel Tiefe in CSS eingehen. Wir haben nicht viel Zeit, um all die verschiedenen Dinge, die Sie mit CSS tun können, abzudecken. Hoffentlich war das ein guter Überblick. Im nächsten Video werden wir über das endgültige andere Skript oder ein Stück Code sprechen , das Sie auf Ihrem Front-End haben möchten, und das ist JavaScript. Ich freue mich darauf, Sie im nächsten Video zu sehen. 7. Javascript: In diesem Video werden wir über JavaScript sprechen. Wir werden genau dort springen, wo wir aufgehört haben, genau wie im letzten Video. Was unser HTML-Dokument hier hat, das es vorher für CSS hatte, hatte es hier ein Link-Tag zu CSS, das definiert, wo wir unsere CSS-Datei ablegen sollen. Genau hier können wir ein Skript-Tag in unserem Körperbereich sehen , das uns einen Pfad gibt, um unser JavaScript zu setzen. Ich werde folgen, was die Vorlage hier sagt und ich gehe zu meinem Projektverzeichnis, das hier ist. Ich werde einen neuen Ordner machen, es js nennen, was übrigens eine Standardkonvention ist, um Ihre HTML-Dateien in die Wurzel zu legen. Dies wird als Stammverzeichnis des Verzeichnisses bezeichnet. Legen Sie dann Ihre CSS-Dateien in einen CSS-Ordner und legen Sie Ihre JavaScript-Dateien in einen JavaScript-Ordner. Ich gehe zurück zu hier, um eine neue Datei zu generieren. Klicken Sie auf Neue Datei. Ich gehe diesmal etwas schneller, weil wir das schon durchgemacht haben, also hoffentlich ist das in Ordnung mit euch. Was ich hier tun werde, ist, Speichern unter und ich werde in JavaScript gehen. Ich habe vergessen, wie sie es nannten. Sie nannten es Skripte dot js. Ich gehe hierher zurück, Speichern unter, gehe in js, kopiere das. Es tut nicht, kopieren und einfügen, also muss ich es eingeben. Es war nur Skripte dot js. Cool. Jetzt weiß jeder, der Browser weiß, der Code-Editor weiß das, das ist eine JavaScript-Datei. JavaScript-Dateien enden in dot js. Nur um klar zu sein, wir müssen diesen Pfaden nicht folgen, ich könnte alles ändern, aber es muss nur mit dem übereinstimmen, wo die Datei gespeichert ist. Es ist nur ein Link zu der Datei, wo immer sie sich befindet. Ich folge nur der Konvention hier, weil es ziemlich Stock Standard Convention ist. Nun, bevor wir tatsächlich etwas JavaScript schreiben, ist es wichtig zu wissen, was JavaScript tatsächlich ist. JavaScript ist eine Programmiersprache. JavaScript ist die interaktive Front-End-Programmiersprache. Was ich damit meine, ist, dass es mit dem Frontend geliefert wird. Jedes Mal, wenn Sie mit einer Seite interagieren, klicken Sie auf etwas und etwas öffnet sich. Das ist JavaScript, das für Sie funktioniert , es sei denn, es lädt die Seite neu . In diesem Fall sendet das wahrscheinlich eine Anfrage an den Server, der HTML, CSS und JavaScript wieder ausspuckt . Ich versuche nur daran zu denken, was eine JavaScript-schwere Sache ist, die wir betrachten könnten. Google Sheets, zum Beispiel und Gmail und all das, sie sind Echtzeit-Apps. Die gesamte Interaktion, die hier durchgeführt wird, ist JavaScript, denn wie Sie sehen können, ist es alles in Echtzeit. Wenn ich auf diese und dies klicke, und klicke auf, dass und das verbirgt sich und das zeigt. Ich klicke darauf, das öffnet sich. Es definiert, wie Sie mit einer Webseite interagieren. Wie Sie sehen können, während ich das alles mache, die Webseite nicht neu geladen, es ist alles JavaScript. Was bedeutet das für unser Projekt? Es bedeutet, dass wir einige dieser Dinge hier manipulieren oder andere Funktionen ausschalten können. Einer der grundlegendsten, die wir tun können, ist ein Konsolenprotokoll. Ein Konsolenprotokoll eignet sich hervorragend zum Ausspucken von Variablen oder irgendetwas anderes, das Sie überprüfen müssen , wenn Sie JavaScript-Entwicklung durchführen. Ich werde nur ein Konsolenpunktprotokoll löschen und Hallo Welt sagen. Sie werden wahrscheinlich den Zweck hinter dem Konsolenprotokoll im Moment nicht verstehen, aber wenn es um das Debuggen geht, ist es wirklich wichtig. Ich werde meinen Browser dort drüben setzen, Entwickler-Tools öffnen und was ich tun werde, ist, weil wir es haben, ich werde es einfach auf den Boden legen, damit wir alles sehen können. Was Sie tun können, ist, dass Sie hier über die Konsole gehen und neu laden können. Es taucht mit Hello Welt auf. Aber ich weiß, dass das nicht wirklich praktisch ist. Aber sagen Sie zum Beispiel, Sie wollten überprüfen, ob eine Funktion ausgelöst wurde oder etwas, Sie könnten Hallo Konsolenprotokoll dort einfügen. Dann können Sie anfangen, Dinge zu programmieren, wie eine Variable zu definieren. Sie würden sagen, var x, rufen Sie x, Hallo Welt. Dann, anstatt Hello world explizit zu protokollieren, könnten Sie x protokollieren und Sie erhalten genau das gleiche. Wenn ich debugge, möchte ich sagen, zum Beispiel, wenn ich versuchen würde, den Wert von x zu finden, würde ich etwas wie, x als String eingeben . Wenn ich diese Anführungszeichen auf beiden Seiten setze, bedeutet das, dass ich einfach alles herausbringe, was ich dort geschrieben habe. Dann können Sie mit einem Komma eine andere Variable oder ein Stück String darin einfügen. Eine Zeichenfolge ist nur Text, wie Sie herausfinden werden. Dann kann ich sehen, x ist Hallo Welt. Nun, eine andere Sache, die Sie tun können, was wir tatsächlich sehen, geschieht in unserem Browser ist eine Warnung. Dies ist eines der grundlegendsten Dinge, die Sie auch in JavaScript tun können. Ich lade die Seite neu und du bekommst eine Warnung, hallo Welt. Jedes Mal, wenn Sie die Seite neu laden, wird sie wieder angezeigt. Nun, lassen Sie uns es tatsächlich verwenden um mit dieser Seite zu interagieren, denn ehrlich, was wir hier tun, nur eine Variable definieren und sie dann aussetzen, es ist nicht wirklich mit unserer Webseite zu interagieren. Was wir tun könnten, ist, und ich ermutige Sie, dies auch zu tun, gehen Sie einfach zu Google und fragen Sie Google, wie es geht. Dies ist eigentlich eine wirklich wichtige Fähigkeit als Entwickler. Entwickler erinnern sich nicht, wie man alles macht und sie oft vergessen, manchmal musste ich etwas tun. Es gibt jede Menge Dokumentation online und so. Du sollst dich nicht an alles erinnern. Wenn Sie jemals vergessen, etwas zu tun, oder Sie wollen einfach nur lernen, wie man etwas macht. Wenn Sie eine gute Frage in Google eingeben, erhalten Sie eine gute Antwort und Sie werden wissen, wie es geht. Sagen wir einfach, wie man sich mit JavaScript verbirgt und einmeldet. Sie können js sicher eingeben. Ich werde die Seite laden. JavaScript, ausblenden Element anzeigen. Werfen wir einen Blick auf das hier. Diese Website ist eine Stack Overflow Website. Wenn Sie jemals ein Problem haben, können Sie sehen, welche Probleme anderer Leute waren und sehen, wie sie es gelöst haben. Wenn Sie ein ähnliches Problem haben, gibt es Ihnen Ideen, wie Sie Ihr bestimmtes Problem lösen können. Was wir hier tun können, ist, ich werde diesen Teil hier kopieren. Eigentlich werde ich das kopieren. Ich gehe hier zurück zu unserem Projekt. Ich werde in unsere Skripte gehen und erklären, was wir hier haben. Aber vor allem, bevor wir es erklären, werde ich das ändern. Ich werde das speichern und ich werde nachladen drücken. Was ist jetzt hier passiert? JavaScript ist eine objektorientierte Sprache. Was das bedeutet, ist, dass wir verschachtelte Elemente zielen können, indem wir Punkte zwischen ihnen einfügen. Wieder, lassen Sie sich nicht überwältigen, ich versuche nur zu erklären, was hier vor sich geht. Es ist im Grunde, wir beginnen mit dem Dokument, das unsere Webseite hier ist. Wir haben einen Punkt und diese Methode ist Element für ID erhalten, die nur unser Element basierend auf einer ID findet. Denken Sie daran, dass wir hier eine ID für dieses div, ID-Feld eins eingerichtet haben. Was wir tun müssen, ist in eine Zeichenfolge zu setzen, die sich daran erinnern, eine Zeichenfolge ist nur Text hier und wir zielen auf Feld eins. Jetzt sind wir in diesem Element und innerhalb dieses Elements können wir Stil zielen. Wir sind jetzt im Stil, also brauchen wir eine andere Sache, und das heißt, innerhalb des Stils können wir ein Attribut namens display ansprechen. Dann können wir es mit einem Gleichheitszeichen auf keine setzen. Eine weitere wichtige Sache, die in der Programmierung zu wissen ist, ich weiß, dass ich hier eine Menge Zeug schmeiße, wie ich daran denke, das ist eine einzige Gleiche ist Zuweisung. Wenn Sie zum Beispiel einen Vergleich machen, wenn wir x sagen, ich weiß, dass wir diese Variableneinrichtung noch nicht haben, aber wenn x gleich eins ist, würden Sie zwei Gleiche tun. Das ist mehr wie das, was Sie mit Gleichen denken würden. Gleich in Programmiersprachen wie JavaScript ist Zuweisungen. Wir sagen nur, weisen Sie diesen Teil diesem Teil zu. Wie Sie sehen können, wird die Stileigenschaft von allem festgelegt, was die ID von Box 1 auf none hat. Was wir tun können, ist, dies zu blockieren, was ein weiterer möglicher Wert ist und es erscheint wieder. Das gibt uns die Möglichkeit, Dinge basierend auf Logik zu bearbeiten. Im Moment versteckt es es nur, was es wirklich nicht braucht. Aber was wir tun könnten, ist eine Bedingung, die wäre, sagen wir zum Beispiel, wenn etwas der Fall wäre, verstecken Sie die Box. Ohne hier ins Detail zu kommen, lassen Sie uns einfach eine Aussage einfügen, die definitiv nicht wahr ist. Wenn eins größer als zwei ist, zeigen Sie keine an. Offensichtlich ist man nicht größer als zwei, also wird es das nicht tun. Ist eins weniger als zwei? Ja, das ist es. Zeigen Sie es nicht an. Jetzt weiß ich, dass dies ein primitives Beispiel ist, aber wir können nicht in eine vollständige Übersicht von JavaScript in diesem Video bekommen. Aber das Wichtigste hier ist, dass wir unser HTML-Dokument hier haben. Es ist mit einem Stylesheet verknüpft , wo unser CSS ist, das unsere Stile definiert. Es ist auch mit unserem JavaScript verknüpft, wo wir programmatische Front-End-Verhalten definieren können. Wir hätten zum Beispiel, wenn jemand darauf klickt, passiert das. Wenn eine Box eine bestimmte Größe hat, sollte diese andere Box nicht angezeigt werden. Zeug wie das. Alles, was Sie wirklich daran denken können, was auf dem Front-End erscheint oder was der Benutzer interagiert oder was Sie auf anderen Websites gesehen haben. Tu einfach, was wir bei Google gemacht haben. Ich weiß, dass ich einige meiner Erfahrungen verwendet habe, um herauszufinden, welcher Teil der Webseite kopiert werden soll. Wenn Sie ein wenig mehr graben und das ist etwas, das Sie im Laufe der Zeit lernen, ist, wie Google als Entwickler zu verwenden. Sie können hier sehen, dass sie es auch tun. Dokumentieren, Element für ID abrufen , das einer Variablen zuweisen und dann umschalten. Aber ja. Grundsätzlich können Sie eine unendliche Menge Dinge mit JavaScript machen. Um ehrlich zu sein, ist die Verwendung eines Frameworks wie jQuery, auf das wir im nächsten Video eingehen werden, wirklich mächtig und hilft Ihnen, wirklich zu vereinfachen was Sie mit JavaScript in Bezug auf die Manipulation von HTML tun. Im nächsten Video möchte ich Ihnen jQuery zeigen, das ein beliebtes JavaScript-Framework ist. Ich möchte Ihnen auch Bootstrap zeigen, das ein beliebtes CSS-Framework ist. Sobald wir diese Frameworks eingefügt haben, die für uns einen Großteil der schweren Heben machen und die Dinge viel einfacher machen, werden Sie beginnen zu sehen, dass wir uns schneller und einfacher entwickeln können und viele Entwickler tatsächlich auf diese Weise entwickeln. Es ist wichtig, dass Sie wissen, dass diese Frameworks existieren und wie Sie mit ihnen beginnen können. Ich freue mich darauf, Sie im nächsten Video über Frameworks zu sehen. 8. Frameworks: Willkommen zurück. In diesem Video werden wir über Frameworks sprechen, welche Frameworks und wie sie uns helfen, für das Web zu entwickeln. Upwork hat einen guten Artikel über Frameworks. Ich bin sicher, wenn Sie dies bei Google suchen, werden Sie es wahrscheinlich finden, ansonsten ist hier die direkte URL. Was ich an diesem Artikel mag, ist, dass er die Kernfunktionen eines Webanwendungs-Frameworks teilt und auch einige gemeinsame Beispiele von Frameworks , die echte Webentwickler tatsächlich die Kernfunktionen eines Webanwendungs-Frameworks verwenden, Bibliotheken, APIs, Gerüste, Ajax, Caching, Sicherheit und Compiler. Je nachdem, wo Sie sich in Ihrer Lern-Code-Reise befinden, ergeben einige von ihnen vielleicht keinen Sinn, vielleicht machen alle vielleicht keinen Sinn und das ist in Ordnung. Der beste Weg, um an ein Framework zu denken, ist, dass es wirklich ein Framework ist. Es ist ein Haufen Code, der bereits für Sie eingerichtet ist, auf dem Sie sich entwickeln können. Es kümmert sich um das schwere Heben in bestimmten Bereichen, so dass Sie sich auf die vollständig anpassbaren Teile Ihres Codes konzentrieren können. Technisch ist alles anpassbar, aber das Framework ist so eingerichtet, dass Sie nicht und immer wieder gemeinsame Funktionen tun müssen. Wir haben zum Beispiel in einem früheren Video über Authentifizierung gesprochen . Das ist etwas, das in vielen verschiedenen Webanwendungen und Websites ziemlich üblich ist. Es macht Sinn, dass, Das wird Teil des Frameworks und dann andere Dinge, die Ihnen helfen, schneller zu entwickeln. Es gibt eine zusätzliche Lernkurve mit dem Lernen eines Frameworks weil Sie lernen müssen, in diesem Rahmen zu entwickeln. Aber es spart Ihnen normalerweise viel Zeit und viele Kopfschmerzen und besonders am Frontend, mit einem CSS-Framework und einem JavaScript-Framework, denke ich, ist eine sehr gute Idee. Ich bin dabei, Ihnen zwei Frameworks zu zeigen, die ich benutze und die sehr beliebt sind. Aber bevor wir in diese Front-End-Frameworks eintauchen, wollte ich über diese Backend-Frameworks sprechen. Wenn Sie eine Studie über Python gemacht haben, haben Sie wahrscheinlich von Django gehört, was ist, ich denke, das beliebteste Framework für Python, es ist definitiv ein sehr beliebtes Framework. Wenn Sie sich jemals Ruby für die Webentwicklung angesehen haben, haben Sie wahrscheinlich von Ruby on Rails gehört, aber es gibt andere Frameworks, die Sie verwenden können wie Sinatra und für PHP gibt es auch eine Reihe von Frameworks. Code gezündet habe ich vorher benutzt, und ich weiß, dass Ravel sehr beliebt ist. Was ich tun möchte, ist Ihnen zwei Frameworks zu zeigen, die ich am häufigsten verwende. Wir werden sie in unser Projekt herunterladen, und wir werden sie sofort verwenden, denn wie üblich, ist der beste Weg, um ein Konzept zu lernen, darin zu gehen und es zu tun. Der erste, den ich Ihnen zeigen möchte, heißt Bootstrap. Wenn wir Bootstrap CSS in Google eingeben, werden wir Bootstrap entwickeln, das ein CSS-Framework ist. Bootstrap ist wirklich leistungsfähig für die Erstellung von responsive Websites. Aber es bietet auch eine Reihe von Stilen, die bereits vorhanden sind, um Komponenten zu erstellen. Zuallererst, das responsive Zeug, wie Sie hier sehen können, haben wir div bekommen und wir haben mit div in der Lektion über HTML und CSS gearbeitet. Aber anstatt unsere eigenen Klassen zu bauen, können wir einfach eine Klasse direkt von Säule Medium 1 anhängen. Wie Bootstrap funktioniert, ist das als 12-Säulensystem. Wenn ich sechs dort platzieren würde, würde das bedeuten, dass es die halbe Breite der Seite ist, und wenn ich drei dort platzieren würde, wird das ein Viertel der Breite der Seite sein. Sie können beginnen, hier einige andere Beispiele. Das wird acht Spalten aufnehmen, diese Teilung, und diese wird vier Spalten aufnehmen. Das hilft Ihnen, diese flüssigen reaktionsfähigen Behälter zu bauen und dies in einer Säulenweise zu tun. Aber auch was Bootstrap tut, ist, dass es Ihnen Komponenten gibt, Sie können hier runter kommen und eine beliebige Anzahl von verschiedenen Komponenten sehen, die es hat. Wenn Sie einen Fortschrittsbalken erstellen wollten, der genau so aussieht, können Sie es mit Bootstrap tun, Sie müssen nur Bootstrap herunterladen, es mit Ihrem Projekt verknüpfen, und dann können Sie eine Struktur wie diese mit ein paar Klassen HTML zu sagen, nach welcher Klasse in Bootstrap gehen soll und dann, boom, Sie haben einen Fortschrittsbalken, der so aussieht. Wie ich immer sage, werden Sie anfangen, mehr darüber zu verstehen, wie das funktioniert, wenn wir es tatsächlich verwenden. Aber es gibt ein anderes Framework, das ich vorstellen möchte, bevor wir in unser Projekt stecken bleiben, und das ist jQuery. jQuery ist ein JavaScript-Framework. Ich weiß nicht, es macht einfach, JavaScript viel einfacher und intuitiver zu machen, zumindest für mich tut es das. Was wir mit jQuery tun können, ist, dass wir das DOM mit jQuery manipulieren können. Für diejenigen von Ihnen nicht wissen, was das DOM ist, steht es für Document Object Model. Es bedeutet nur Ihre Struktur Ihrer Seite, die Sie hier mit HTML definiert haben. Wir können die Klassen verwenden, die wir in CSS verwendet. Sie haben vorher gesehen, wie wir eine ID mit einem Hash definiert haben und wir eine Klasse durch einen Punkt definieren. Sie können diese Selektoren in jQuery verwenden, um ein zielgerichtetes Element zu finden und dann ein Attribut darauf wie HTML zu ändern. Das ist sehr mächtig und Sie werden in nur einer Sekunde sehen, wie wir es nutzen werden. Im nächsten Video, weil dieses ein wenig lang geworden ist, werde ich Ihnen diese Frameworks zeigen. Im nächsten Video werde ich Ihnen eine Live-Demo der Verwendung dieser Frameworks zeigen. Ich denke, Sie werden anfangen zu verstehen, wie sie uns wirklich Zeit sparen und viel intuitiver zu bedienen. Dieses Video wird ein bisschen lang, also werde ich es im nächsten Video aufteilen. Wir werden mit der Demo weitermachen. 9. Bootstrap: Im letzten Video haben wir über Frameworks gesprochen und ich habe zwei Frameworks eingeführt, die ich häufig verwende, die Bootstrap und jQuery waren. In diesem Video möchte ich speziell über Bootstrap sprechen. Wir werden Bootstrap herunterladen und wir werden tatsächlich anfangen, damit zu spielen. Wenn Sie auf die Homepage von Bootstrap gehen, was ich glaube, ist getbootstrap.com, können Sie auf den Button „Download Bootstrap“ klicken, und wir können einfach Bootstrap herunterladen, indem Sie auf diese Schaltfläche klicken hier. Ich werde mein Projektverzeichnis finden und ich werde auf „Speichern“ klicken. Wenn ich zurück zu meinem Finder-Fenster gehe, werde ich dies öffnen, weil dies eine ZIP-Datei ist. Ich werde darauf doppelklicken, es wird extrahieren. Ich kann die ZIP-Datei wegwerfen. Wenn wir in den Ordner schauen, können wir eine ähnliche Struktur sehen, wie wir bereits haben. Wir haben nicht notwendigerweise Mittel, aber sie haben ihr CSS und JavaScript genau so organisiert wie wir. Die Sache, die ich nicht unbedingt erwähnt habe, war, dass Bootstrap auch JavaScript hat, aber jetzt wollen wir nur ihre CSS-Datei verwenden. Gehen Sie in CSS, und genau hier ist bootstrap.css die Datei, nach der wir suchen. Ich werde nur darauf klicken, um es in den CSS-Ordner zu verschieben. Ich weiß nicht, warum es so auftaucht. Aber wenn wir rückwärts gehen, können wir jetzt den Rest der Bootstrap-Dateien löschen. Wenn wir in unseren Code-Editor gehen, haben wir jetzt Bootstrap in ihnen. Wir können tatsächlich darauf klicken und es anschauen. Es ist eine lange Datei und es ist gefüllt mit einer Reihe von verschiedenen Stilen, einer Reihe von verschiedenen Regeln und das ist, was Bootstrap funktioniert. Aber die gute Nachricht ist, dass du das ganze Zeug nicht wissen musst. Sie müssen nur wissen, wie man es benutzt. Ich werde das schließen. Es gibt einen weiteren Schritt, den wir tun müssen, bevor wir es in unserem Projekt verwenden können, und das ist, um mit diesem Stylesheet zu verknüpfen. Erinnern Sie sich, wie wir hier mit unserer styles.css verknüpft haben? Nun, das müssen wir noch mal tun. Was ich tun werde, ist, dass ich kopieren werde, indem ich Befehl C, neue Zeile Befehl V oder das Äquivalent auf einem Windows-Computer und alle Details werden die gleichen sein, wie der Dateiname ist anders, also werde ich setzen Sie hier bootstrap.css Ich möchte, dass Sie genau hinschauen, während wir die Seite aktualisieren , weil es sofort einige Änderungen geben wird. Wenn ich neu lade, können Sie sehen, dass sich der Stil unserer Seite bereits geändert hat. In diesem Fall wissen wir, dass Bootstrap jetzt funktioniert. Wie verwenden wir Bootstrap? Nun, genau hier ist die Dokumentation. Dokumentation ist nur der technische Begriff für Sie können sich vorstellen, wie ein Handbuch oder einfach alle Informationen, die Sie wissen müssen, um ein Framework oder ein Stück Software verwenden zu können. Hier können wir die Spalten definieren, wie wir bereits erwähnt haben, aber was wir hier tun können, was ich denke, wird ein bisschen mehr Spaß machen, ist eine Kopie über eine Komponente. Sie können sehen, wie schnell wir eine stilisierte Website auf unserem Bildschirm erscheinen. Ich werde das Fenster erweitern, damit ich die Menüleiste hier sehen kann und ich gehe nach unten zum Seitenkopf. Ich werde das wieder zusammenbrechen. Wo ist sie? Hier ist es. Ich werde alle unsere Divs löschen, die wir bisher haben, also wähle all das aus und lösche es. Wir haben im Grunde ein leeres Dokument. Was ich tun möchte, ist, unser Dokument wieder zu erstellen, aber Bootstrap-Elemente zu verwenden. Um diesen Header zu erhalten, können wir diesen kopieren und direkt hineinlegen. Jetzt funktioniert das Kopieren und Einfügen manchmal nicht. Daher sollten Sie Ihren Inhalt mit Tabulatoren versehen, damit er genauso schön aussieht wie hier. Wenn ich die Seite neu lade, haben wir einen Header und wir können eine beliebige Anzahl von Komponenten hier hinzufügen. Ich kann zu diesem Ding gehen, das man Jumbotron nennt. Klingt ziemlich cool. Ich werde diesen Code kopieren und dann werde ich ihn nach unserem Seitenkopf div setzen. Ich werde auf „Speichern“ klicken, und dann kommt es auf. Jetzt ist das Padding ein bisschen aus und das liegt daran, dass wir keine andere Funktion von Bootstrap verwendet haben, die ein Container ist. Was ich tun muss, ist all das, was wir gerade erstellt haben, in einen Container zu wickeln. Das ist natürlich alles eine persönliche Wahl. Es liegt an Ihnen, wie Sie Ihre Website gestalten. Aber alles, was wir tun müssen, ist ein div zu bekommen und ihm eine Klasse von Containern zu geben. Ich werde das einrücken, so dass es offensichtlich ist, dass es in diesem Eltern-Div ist, und dann werde ich das div schließen, schließende Tag. Jetzt möchte ich, dass du genau zusiehst. Ich werde die Seite öffnen und beobachten, wie wir die Seite aktualisieren. Wir haben es jetzt in einen Behälter gelegt , der es auf einem großen Bildschirm betrachtet, es gibt es nur mehr Polsterung an den Seiten, und wenn wir es dann auf einem kleineren Bildschirm betrachten, schrumpft die Polsterung, und dann, wenn wir es verschieben ist es reaktionsschnell, was je nachdem, wie Sie Ihren Code schreiben, eine riesige Zeitersparnis ist. Jetzt haben wir diesen hübschen Behälter. Wir haben diesen schönen Seitenkopf, den wir übrigens bearbeiten können, wir können hier wieder rein gehen und in diesem H1-Tag, können wir sagen: „Unsere tolle Website.“ Was wäre der Subtext für unsere tolle Website, „Die beste Website aller Zeiten.“ Dann sagen Sie, anstatt Hallo Welt zu sagen: „Hallo und willkommen.“ Dann in unserem p-Tag : „Dies ist die größte Website, die Sie jemals sehen werden.“ Mutige Behauptung auf. Das haben Sie jetzt alles geändert. Sie können den Text auf der Schaltfläche auch ändern, indem Sie hier hineingehen, ich werde erweitern und zwischen den a-Tags, was nur eine Möglichkeit ist, einen Link zu definieren, können Sie hier jeden Text einfügen, den Sie wollen. Statt mehr zu erfahren, können wir stattdessen sagen: „Erste Schritte “, speichern Sie das. Bewegen Sie das zur Seite, aktualisieren Sie und plötzlich können Sie sehen, wie Bootstrap für uns funktioniert. Wenn wir das selbst programmieren würden, wäre es viel länger, weil wir all diese Stile selbst definieren müssen. Nur um zu demonstrieren, was Bootstrap für uns tut, wenn wir diese Klassen ausziehen würden, würde unsere Website aussehen? Ich werde diese Klasse loswerden und die Seite aktualisieren. Ja, es sieht immer noch gut aus, aber es gibt keine Grenze, es gibt keine Polsterung. Für einen dramatischeren Effekt könnte ich diese Klasse hier auf Jumbotron loswerden. Zurück gibt es keine große Polsterung, es gibt keine Hintergrundfarbe. Bootstrap fügt all das hinzu. Ich hoffe, Sie können beginnen zu sehen, wie Bootstrap diesen Prozess der Entwicklung von responsive Websites macht , die ziemlich cool aussehen. Ich denke, das ist ziemlich gutes Design, und sie machen es so viel einfacher. Ich ermutige Sie, Bootstrap herunterzuladen und einfach damit zu spielen. Kopieren und fügen Sie einige dieser verschiedenen Code-Bits ein und wenn Sie jemals möchten, sagen wir zum Beispiel, wollte ein Formular erstellen und es schön aussehen lassen, Sie könnten nach Formular suchen und dann können Sie zu Formularen kommen, und Sie können schöne Buttons, haben diese verschiedenen Tabs, alle Arten von Sachen, und Sie erhalten alle diese Komponenten direkt aus der Box mit Bootstrap gestylt. Ich denke, ich habe meinen Standpunkt jetzt klar gemacht, wie viel ein Framework wie Bootstrap dir so viel gibt und spart dir so viel Zeit, wenn du eine App erstellen und stylen willst. Im nächsten Video werden wir über das andere Framework sprechen, das ich wirklich liebe, und das ist jQuery. 10. JQuery: Im letzten Video verwenden wir ein beliebtes CSS-Framework namens Bootstrap um zu optimieren, wie wir unsere Webseiten erstellen, und wir konnten Komponenten wie diesen mit einer kleinen Menge Code erstellen und es geht darum, wie wir unser Dokument und setzen auch verschiedene Klassen auf unsere Elemente um einige dieser Stile direkt von Bootstrap zu erben. In diesem Video gehen wir übrigens sehr kurz über jQuery. Es gibt viel, was Sie mit jQuery tun können. Aber jQuery, wenn wir auf ihre Website gehen, die jQuery.com ist, ist eine JavaScript-Bibliothek, es ist technisch kein Framework. Es ist eine Bibliothek, in der Sie weniger Code schreiben und viel damit tun können. Wenn wir auf der Homepage nach unten scrollen, können wir einen kurzen Blick auf die drei Hauptmerkmale von jQuery werfen. Eines davon ist DOM Traversal und Manipulation. Das klingt schick, aber im Grunde, wofür DOM steht , ist ein Dokumentobjektmodell und im Wesentlichen, was ein Dokumentobjektmodell ist, ist genau das, was wir hier haben. Wir haben verschiedene Elemente und es ist in einer bestimmten Weise strukturiert. Dieses DIV ist zum Beispiel in diesem DIV verschachtelt und wir haben dieses Überschrift-Tag innerhalb des DIV. Grundsätzlich können Sie sich unsere HTML-Struktur als unser Dokumentobjektmodell vorstellen. Was jQuery uns erlaubt, ist unsere Elemente zu manipulieren. Wir können ein bestimmtes Element mit einem jQuery-Selektor zielen und dann können wir eine Methode aufrufen, um etwas zu ändern. In diesem Fall werden wir auf diese Schaltfläche mit der Klasse weiter aussehen und dann würden wir den HTML auf den nächsten Schritt ändern, dot-dot-dot. Das zweite Feature, für das jQuery wirklich gut ist, ist die Ereignisbehandlung. Ereignisbehandlung, im Grunde ist ein Ereignis alles, wo etwas auf der Seite passiert, so dass ich auf diese Schaltfläche klicken könnte. Das ist ein Ereignis, selbst wenn ich meine Maus bewegen kann ein Ereignis sein, ich Rechtsklick, ich scrolle zu einer bestimmten Position auf der Seite, sind alles, was ich mit der Webseite interagiere und das gilt als ein Ereignis. Jedes Mal, wenn ein Ereignis passiert, können wir mit jQuery programmieren, damit etwas anderes passiert. In diesem Beispiel, das wir ein ähnliches Beispiel in unserem Projekt erstellen , ist, wenn etwas angeklickt wird, also in diesem Fall eine Schaltfläche innerhalb der Schaltfläche Container. Wenn es angeklickt wird, wird dieses versteckte Feld angezeigt. Das dritte, was wir mit jQuery tun können, ist Ajax. Ajax ist ein bisschen mehr von einem fortgeschrittenen Konzept, aber es ist eine Möglichkeit , dass wir ein lokales Skript auf dem Server aufrufen können. Wir können grundsätzlich auf das Backend zugreifen und Daten erfassen ohne die Seite neu laden und Back-End-Code verwenden zu müssen. noch keine Sorgen um Ajax, aber es ist sehr mächtig, wenn du anfängst, weiter in jQuery zu kommen. Auf der Website von jQuery möchte ich, dass Sie auf die Schaltfläche „Download“ klicken , und auf der Download-Seite finden wir einen Link zur komprimierten Produktion jQuery. Lassen Sie uns zunächst einfach darauf klicken. Es sieht aus wie Kauderwelsch, weil es so genannt wurde , dass es zu einer kleineren Datei wird. Aber wenn wir uns ansehen wollten, wie es wirklich aussieht, können wir auf die nächste Datei klicken und dann können wir eine ganze Reihe von JavaScript mit Kommentaren sehen , die beschreiben, was los ist. dir wird übrigens nicht erwartet, dass du irgendwas davon verstehst. Whoops, ich muss darauf zurückgehen. Wir können hier zurück gehen und wir können diese einfach herunterladen und machen Sie sich keine Sorgen um die Versionsnummer jemals, dies wird ständig steigen jedes Mal. Klicken Sie einfach mit der rechten Maustaste darauf und klicken Sie auf „Link speichern unter“. Dies werden wir eine JavaScript-Datei sein und Sie müssen nur zu Ihrem Projektverzeichnis gehen und zu Ihrem JavaScript-Verzeichnis gehen, in dem Sie all Ihr JavaScript für Ihr Projekt speichern und klicken Sie auf „Speichern“. Sie können es hier bereits sehen. Sie können es in Ihrem Code-Editor betrachten, aber es wird keinen Sinn ergeben, weil es verkleinert ist, was übrigens durch diesen Punkt min dot JS demonstriert wird. Wenn wir dieses zum Beispiel heruntergeladen haben, wenn ich dieses in einem neuen Tab öffne, hat es nicht diesen Punkt min drauf. Sie können die gesamte unkomprimierte Datei sehen. Aber für unsere Zwecke müssen wir den Code nicht wirklich betrachten , damit wir ihn einfach verkleinern können. Nun, genau wie wir es mit CSS getan haben, gibt es noch eine Sache, die wir tun müssen, um es in unser Projekt aufzunehmen , und das ist, es mit diesem Skript-Tag zu referenzieren. Genau wie wir es vorher getan haben, werde ich das kopieren. Ich werde es oben setzen, weil ich möchte, dass meine jQuery geladen wird, bevor ich es mit meinen eigenen Skripten verwende, und ich werde einfach rechten Maustaste hier klicken und diesen umbenennen, damit ich den Namen kopieren und einfügen kann, mir ein bisschen Zeit sparen kann. Ich werde das schließen und hier zurück gehen und es ist auf dem gleichen Foto, wir müssen nur den Dateinamen ändern. Nun, dies wird enthalten sein, und wenn wir die Seite neu laden, wir noch nichts bemerken, weil wir eigentlich keine jQuery verwendet haben. Was ich tun werde, ist in Skripte zu gehen, das zu löschen, weil dieses Element Box 1, wir haben es nicht einmal mehr in unserem Projekt, so dass das ziemlich nichts tut. Ich werde das rückgängig machen und was ich tun werde, ist mit etwas zu beginnen , das wirklich in jQuery üblich ist und keine Sorge, ich werde erklären, was das in einem Moment ist. Aber ich werde Dollarzeichen Dokument Punkt bereit eingeben. Offene Klammern Funktion, öffnen und schließen Klammern, Leerzeichen. Geschweifte Klammern, gehen Sie zum Ende, setzen Sie ein Semikolon und hier drinnen werde ich Konsolenpunktprotokoll jQuery geladen und beenden Sie das dann mit einem Semikolon. Wir werden die Seite auf dieser Seite aktualisieren, nachdem Sie auf „Speichern“ geklickt haben. Woher wissen wir, ob es funktioniert? Denn im Wesentlichen haben wir gerade ein Konsolenprotokoll erstellt. Es ändert nichts auf der Seite. Aber wenn Sie sich an die Entwicklertools erinnern, mit denen wir am Anfang unseres Videos gearbeitet haben, können wir sie öffnen. Ich bin auf einem Mac, also drücke ich Option Befehl I auf Chrome und wir können jetzt sehen, die Konsole geöffnet. Wahrscheinlich hatte ich meine Konsole schon mal geöffnet. Es wird wahrscheinlich dazu kommen und dann klicken Sie auf „Konsole“ und Sie können beginnen, Ihre JavaScript-Konsole zu sehen. Im Moment haben wir einen Fehler und der Fehler ist Dollarzeichen ist nicht definiert. Was haben wir hier falsch gemacht? Lassen Sie mich zurückgehen. Ich erwähnte, dass wir das zuerst hätten setzen sollen, aber wir haben es nicht getan. Also werde ich das ausschneiden und einfügen und es dort platzieren, wo es oben hingehen soll. Dies ist wichtig, eher Konzept zu verstehen, ist die Reihenfolge Ihrer Dateien. Wenn ich beginne, Dollarzeichen zu verwenden, das diese ganze Sache ein jQuery-Selektor und eine jQuery-Methode ist, wenn ich beginne, das zu verwenden, bevor ich jQuery sogar geladen habe, so wie es vorher war, wo es darunter war. Wo es darunter war. Dies wird geladen, bevor sogar die jQuery geladen wird, also hat es natürlich einen Fehler. Also stellen Sie sicher, dass das oben ist. Laden Sie die Seite neu, und es heißt jQuery geladen. Jetzt wissen wir, dass jQuery funktioniert, aber was ist das? Grundsätzlich ist der erste Teil davon der Selektor, und der zweite Teil ist die Methode. Im Dokumentobjektmodell sind wir in der Lage, das gesamte Dokument mit einer Variablen namens Dokument zu adressieren. Die Konvention mit jQuery-Selektoren geht immer, $ , offene Klammern und dann, was immer Sie auswählen möchten. Dann würden Sie Ihre Klammern schließen und einen Punkt setzen, um Ihre Methode zu definieren. In diesem Fall haben wir eine fertige Methode, die im Grunde diese Funktion auslöst, wenn dies fertig ist. Also haben wir das Dokument ausgewählt, und wenn es fertig ist, starten wir diese Funktion. Wieder, ich werfe Sie wahrscheinlich unter den Bus, aber wir werden in einer Sekunde sehen, wie das mächtig ist. Wir wollen nicht nur eine Konsole abmelden, das hilft uns nur zu bestimmen, ob jQuery funktioniert oder nicht. Was wir tun können, ist, anstatt dieses Konsolenprotokoll zu tun, tatsächlich zu beginnen, ein Ereignis auf der Seite zu behandeln und tatsächlich etwas zu tun, das ein bisschen mehr Sinn macht. Was ich tun werde, ist eines unserer Objekte auf unserer Seite mit einem jQuery-Selektor auszuwählen, und was an jQuery-Selektoren großartig ist, ist, dass wir Elemente auf die gleiche Weise anvisieren können, wie wir mit styles.css, mit CSS, sorry, im Allgemeinen. So können wir Elemente einer bestimmten ID mit Hash Ziel, und wir können Elemente einer bestimmten Klasse mit dem Punkt Ziel Ziel. Also, was ich tun werde, wir haben diese eigentlich nicht mehr, also ist es ziemlich sinnlos, ich könnte sie genauso gut löschen. Wir haben diese nicht mehr, aber was wir haben, sind diese verschiedenen Elemente. Was ich hier tun kann, ist dieses spezielle div nach seiner Klasse anzusprechen. Wie ich Ihnen bereits gezeigt habe, können wir Dot tun, um zu sagen, dass es eine Klasse ist, und dann können wir Seitenkopf sagen. Ich glaube, das war es. Seiten-Header, ja, das ist richtig. Jetzt haben wir alle Elemente mit dem Klassenseitenkopf ausgewählt. In diesem Fall gibt es nur einen, also können wir hier hineingehen, und wir können den HTML genau wie das Beispiel, das wir in jQuerys Website gesehen haben, manipulieren. Immer wenn wir nur rohen Text eingeben, müssen wir einfache Anführungszeichen oder doppelte Anführungszeichen haben Was ich hier tun werde, ist nur Hallo zu setzen und ein Semikolon am Ende zu setzen, um diese Funktion zu beenden, und plötzlich wird die Gesamtheit meiner Seitenkopfzeile wurde durch hallo ersetzt, was nicht so großartig ist. Ich denke, wahrscheinlich eine bessere Idee, es zu verlassen. Aber das geht nur, um Ihnen zu zeigen, wie Nummer 1, ich werde das wieder aufstellen. Wie Nummer 1, können wir ein Element auswählen und dann können wir es manipulieren. Das ist sehr mächtig. Wir können hier alle Arten von Logik einfügen, wie wir JavaScript verwenden würden. Aber wo jQuery wirklich hilft, ist , diese Selektoren und diese Methoden leicht zu manipulieren. Jetzt spreche ich vielleicht gerade über deinen Kopf, aber ich möchte dir nur genau zeigen, wofür jQuery großartig ist. Was ich tun möchte, ist ein gemeinsames Handle, ein gemeinsames Ereignis, das ein Klick ist. Also, was ich tun werde, um das ein bisschen einfacher zu machen, ist, dass ich zu diesem Knopf kommen werde, der das A-Tag hier ist, und was ich tun werde, ist eine ID gegeben, so dass wir es sehr spezifisch anvisieren können. Ich werde es nennen, Schaltfläche „Erste Schritte“. Also, das hat jetzt eine Klasse. Nun, was ich tun werde, ist, dass ich einen Ereignishandler einrichten werde, und wie Sie das tun, ist, dass Sie zuerst das Element anvisieren. Also werde ich, tatsächlich, es gibt ein paar Möglichkeiten, es zu tun, aber ich zeige dir so. Ich werde die Schaltfläche „Erste Schritte“ ergreifen. Ich habe einen Hash eingefügt, weil es eine ID ist. Ich wähle die Schaltfläche „Erste Schritte“ aus. Ich werde die on-Methode machen, und dann das erste, was ich sagen werde, ist Click, denn das ist das Ereignis, das wir behandeln möchten. Dann wird der zweite Teil die Funktion sein. Was wird also passieren, wenn der Klick tatsächlich ausgelöst wird? Am Ende werde ich ein Semikolon setzen, weil wir JavaScript verwenden. Genau hier kann ich eine beliebige Anzahl von Dingen tun, die ich will, aber lass uns einfach etwas Dummes tun, nur um es willen und den Seitenkopf verstecken. Wir können diese Klasse greifen, und dann können wir einen anderen jQuery-Selektor verwenden, um .page-header.hide zu setzen. Hide ist eine Methode, die Sie verwenden können. Es ist eine jQuery-Methode, und es ist einfach sehr einfach. Ich wähle es einfach aus, und dann kann ich setzen.hide und dann werde ich es verstecken. Mal sehen, ob es funktioniert. Ich werde unser Projekt aktualisieren, auf die Schaltfläche Erste Schritte klicken, und wir haben den Seitenkopf ausgeblendet. Nun, ich weiß, dass das nicht wirklich sehr praktisch ist, also werde ich ein besseres Beispiel geben. Das heißt, ich werde einen versteckten Text hier unten setzen. Beginnen wir mit einem p-Tag, zeigt das p, und wir werden versteckt setzen. Nun, sagen wir, das ist die Antwort auf Ihr Problem. Nun, wenn wir das einfach speichern und die Seite aktualisieren, wird sie angezeigt. Es wird standardmäßig angezeigt, was Sie wahrscheinlich erwartet hatten. Aber wenn wir wollen, dass es zuerst ausgeblendet wird, was wir tun werden, ist, dass wir ein Attribut zu diesem p-Tag hinzufügen können, Stil gleich, doppelte Anführungszeichen, und im Inneren können wir eine Anzeige keine tun. Speichern Sie das, aktualisieren Sie die Seite, und es gibt keinen Absatz. Eine andere Sache, die ich tun möchte, ist, diesem eine ID zu geben, damit ich es gezielt ansprechen kann, und ich werde diesen versteckten Text nennen. Jetzt hat es eine ID und es hat einen Stil, der sagt, dass sie nicht angezeigt werden soll, wenn die Seite zum ersten Mal geladen wird. Was ich tun kann, ist, dass ich es hier anvisieren kann, indem ich seine ID verwende, die versteckter Text ist. Es ist eine ID, also verwende ich Hash. Jetzt habe ich den versteckten Text ausgewählt, und was ich tun werde, ist, dass ich eine Methode verwenden werde, eine sehr einfache in jQuery, die ist.show ist. Speichern Sie diese Seite, aktualisieren Sie sie. Sie würden noch nichts sehen, aber was passiert, wenn wir auf den Button klicken? Die versteckten Texte, die wir so einstellen, dass sie in unserem HTML als keine angezeigt werden, wurden jetzt mit jQuery manipuliert. Dies ist ein sehr einfaches Beispiel dafür, was wir mit jQuery tun können. Es gibt so viele Dinge, die wir mit jQuery tun können. Ich möchte nur, dass Sie an all die verschiedenen Möglichkeiten denken, wie Sie eine Webseite manipulieren oder Ereignisse behandeln können . Also könnten wir etwas tun, dass, wenn ich auf diese Überschrift klicke, etwas passiert oder wenn ich etwas scrolle passiert. Oder wir könnten herausfinden, wir könnten mathematische Probleme und alle möglichen Dinge hier machen und wir können im Grunde eine unendliche Anzahl von Dingen mit jQuery tun , um Elemente zu zielen und sie dann zu manipulieren. Dann können wir das auch mit Ereignishandlern kombinieren, wie wir es hier getan haben, und wir können im Grunde das DOM manipulieren, unser Dokument basierend darauf manipulieren, wie die Person mit der Webseite interagiert. Jetzt können Sie dies natürlich mit JavaScript tun, Sie brauchen jQuery nicht. Aber diese Selektoren und diese Methoden machen es so viel einfacher, bis ich getrost hier reingehen und ein anderes Element anvisieren kann , wenn wir diesem nur eine ID von Jumbotron geben, und wir können einfach #jumbotron .htmlblah machen. Lassen Sie uns einfach überprüfen, das ist alles richtig, Jumbotron, bla. Plötzlich verwandelt es sich einfach in bla. Wenn ich das in JavaScript tun müsste, würde ich es vielleicht nachschlagen, aber mit jQuery macht es einfach und intuitiv, und es erspart mir viele Kopfschmerzen und ich arbeite wirklich gerne damit . Angesichts seiner Popularität würde ich sagen, dass viele Leute gerne damit arbeiten. Im nächsten Video gehen wir vom Front-End aus weiter und schauen uns das Back-End an. Hoffentlich überwältigen wir dich bisher nicht. Zögern Sie nicht, Fragen zu stellen und ich werde Ihnen helfen, so gut ich kann, und hoffentlich lernen wir bisher einige gute Dinge. Wir sehen uns auf dem nächsten Video. 11. Einen einfachen Server einrichten: Wir haben jetzt unsere grundlegende Website, die wir mit HTML, CSS und JavaScript erstellt haben. Aber Front-End-Webentwicklung kann nur die Spitze des Eisbergs sein, wenn es um den gesamten Web-Entwicklungsprozess geht , und das Back-End, wie wir bereits besprochen haben, kann in einer beliebigen Anzahl von Programmiersprachen mit jedem Anzahl der Serverkonfigurationen, kann es unendlich komplexer werden. Aber im heutigen Video und in den nächsten Videos möchte ich auf einfachste Weise über das Back-End sprechen. Auch mit dem Back-End kann es schwer zu verstehen sein, ohne es tatsächlich zu sehen, tatsächlich damit zu interagieren und tatsächlich in Ihrem Projekt zu implementieren. Das werden wir sofort machen. Wir werden zuerst einen Server bekommen , dann werden wir anfangen, einige PHP-Code zu schreiben. PHP ist eine sehr gebräuchliche Back-End-Programmiersprache für das Web. Es ist, was viele Websites verwenden, und es wird es uns leicht machen, unsere Website später als auch mit PHP als unsere Codebasis zu implementieren . Was Sie für die Back-End-Webentwicklung benötigen, wenn Sie sich unsere Website ansehen, die wir gerade auf dem Front-End hier aufgebaut haben. Wir mussten nur einen Ordner haben, und wir können die Datei buchstäblich wie vorher öffnen und einfach direkt aus dem Dateisystem in unseren Browser lesen. Sehen Sie hier können wir sehen, dass es nur die Datei liest. Der Unterschied zwischen dieser und der Back-End-Entwicklung besteht darin, dass wir es nicht einfach vom endgültigen Dateisystem lesen können. Wenn wir Back-End-Programmierung machen, brauchen wir einen so genannten Server. Jetzt für PHP, ein gemeinsamer Stack, wie sie es nennen, ist der Lampenstack , den wir eingeben, Lampenstack ist Linux. Linux, das ist das Betriebssystem, Apache, das ist der HTTP-Server, MySQL und andere Alternativen, und PHP und andere Alternativen. Für uns werden wir nur MySQL und PHP verwenden. Es spielt keine Rolle, dass wir Apache verwenden. Du musst nicht wirklich wissen, warum das so ist. Aber wir verwenden nicht notwendigerweise Linux. Ich habe einen Computer, mein Computer ist Mac OS X. Sie entwickeln möglicherweise unter Windows, je nachdem, ob Sie sich unter Windows entwickeln oder auf Mac oder sogar Linux entwickeln, benötigen Sie eine andere -Server zu installieren. Für Mac werde ich das nur erweitern. Es gibt einen Server namens MAMP, den Sie installieren können und MAMP ist nur Lampe mit dem L ersetzt durch M für Mac. Wenn Sie ein Windows-Benutzer sind, können Sie WAMP eingeben, ich habe WAMP tatsächlich nie verwendet, weil ich immer MAMP verwendet habe. Aber es ist im Grunde das Äquivalent von MAMP, aber für Windows. Wenn ich zu MAMP gehe, werde ich MAMP hier herunterladen. Ich werde nur die neueste Version finden. Laden Sie herunter. Ich werde das einfach in mein Download-Verzeichnis legen. Alles klar, nachdem ich lange gewartet habe, wird MAMP jetzt heruntergeladen und wir müssen es nur installieren. Ich werde nur durch die Eingabeaufforderungen klicken. Stimmen Sie zu, es wird ein Giga von Raum nehmen, ich wusste nicht, dass es so groß war. Geben Sie Ihr Kennwort ein, um Software zu installieren. Ordnung, unsere Installation war erfolgreich, es gibt keine speziellen Felder gibt etwas, was wir wissen müssen , wie wir tun, wenn wir das installieren, wir klicken einfach weiter im Grunde auf alles, wir schließen diese Websites jetzt. Sobald MAMP installiert ist, können wir es öffnen, und es erscheint so. Bevor wir den Server starten können, müssen wir einige Einstellungen ändern. Gehen Sie hier in den Webserver. Ich möchte, dass Sie auf dieses Symbol klicken, um in unser Projekt zu gehen und darauf zu klicken. Jetzt habe ich es in mein Projektverzeichnis gesetzt und ich werde auf OK klicken. Nun, was ich tun werde, ist klicken Sie auf Start Service. Sie können jetzt sehen, dass die, sorry es bewegt. Aber Sie können jetzt sehen, dass der MySQL-Server jetzt grün ist, was bedeutet, dass er eingeschaltet ist und der Apache-Server grün ist, was bedeutet, dass er jetzt eingeschaltet ist. Es öffnet sich die MAMP-Startseite. Was Sie tun können, um auf Ihre Website zugreifen, ist klicken Sie auf meine Website. Wir haben unsere Website wieder. Wir können es über das Dateisystem so zugreifen, oder wir können darauf über unseren neuen Server zugreifen, der localhost Doppelpunkt 8888 ist. Warum das wichtig ist, warum wir einen Server haben müssen, ist, weil wir bald unseren Code in Back-End-Code umwandeln werden . Eine andere Sache, die wir innerhalb der MAMP Startseite tun können, ist zu Tools gehen und klicken Sie auf PHP my admin. Jetzt, da wir in PHP mein Admin sind, können wir sehen, welche Datenbanken wir installiert haben. PHP mein Admin ist nur im Grunde ein Control Panel, um mit Datenbanken zu arbeiten. Es gibt also einen hier, der gerade MySQL heißt. Aber wir werden sehr bald eine neue Datenbank erstellen. Ich denke, ich werde es dort für dieses Video lassen weil das nächste, das wir etwas PHP machen werden. Aber jetzt, da Sie Ihren Server haben, sind Sie bereit, einige Back-End-Programmierung zu starten. Ich werde Sie im nächsten Video sehen. 12. PHP: Im letzten Video haben wir MAMP eingerichtet, weil ich auf einem Mac-Computer bin. Wenn Sie auf einem Windows sind, hätten Sie WAMP hoffentlich eingerichtet, und wenn Sie unter Linux sind, können Sie ein Linux-Äquivalent einrichten, und jetzt haben wir einen Server. Der Grund, warum dies auftritt, wenn wir zu localhost 8888 gehen, ist, weil wir, wenn Sie sich erinnern, in unseren Voreinstellungen, in unserem Document Root, haben wir unser Projekt auf Document Root gesetzt. Wir können ein neues Projekt einrichten und wir können den Server dorthin leiten und es wird dort erscheinen, aber ich dachte, es wäre einfacher, nur mit dem zu beginnen, was wir bereits erstellt haben. Das erste, was wir tun können, um PHP zu verwenden und unser reines Front-End-Projekt in etwas zu verwandeln, das das Back-End verwendet, ist, dass wir hier hineingehen können und anstelle dieser being.html können wir it.php aufrufen. Wie mache ich das? Ich werde das schließen, und ich werde hierher gehen, und ich werde mit der rechten Maustaste index.PHP umbenennen und dies wird dem Server sagen, dass es sich um eine PHP-Datei handelt. Ich werde die Seite neu laden und nichts ändert sich. Du bist also wie Chris, warum haben wir das getan? Nun, etwas hat sich geändert und wenn wir das öffnen oder versuchen, es nur aus dem Dateisystem zu öffnen, wird es nur den Inhalt der Seite anzeigen. Es wird kein HTML angezeigt, da Sie nur HTML-Dateien hier einziehen können. Was Sie brauchen, ist ein Server und warum wir do.PHP brauchen , ist, weil wir anfangen werden, einige PHP-Code direkt hier zu setzen. Anstelle von h1 möchte ich stattdessen etwas PHP-Code schreiben. Nun das Gute an PHP ist, dass Sie es einfach irgendwo in ein PHP-Dokument einfügen können, das sonst wie HTML aussieht. Im Moment haben wir reines HTML, obwohl es got.PHP dort ist. Was wir tun können, um einige PHP einzufügen, ist öffnende Klammer, Fragezeichen PHP und dann werde ich es sofort schließen, damit wir nicht vergessen, Sie haben wieder ein Fragezeichen und ein schließendes Tag. Nun, was ich hier tun kann, was nicht so erstaunlich sein wird, ist, den Funktionsdruck zu benutzen, um zu sagen: „Hallo Welt.“ Benötigt eine Schließung. Also, wenn ich das hier zurück schiebe, werden Sie sehen, dass dieser erste Teil des h1-Tags jetzt „Hello World“ ist, weil ich einige PHP-Programmierung eingefügt habe. Es gibt keine Möglichkeit, dass Ihr Browser dies herausfinden kann, es sei denn, es sollte einen Server laufen, denn wenn ich dies einfach eintippe, wird es direkt erscheinen, wie wir es eingegeben haben. Es sieht es nur als Text. Deshalb brauchen wir einen Server, der PHP interpretieren und dieses Back-End verarbeiten kann . Das ist nicht wirklich relevant, wir hätten einfach „Hello World“ hier tippen und die gleichen Ergebnisse erzielen können. Was können wir mit PHP machen? Nun, wir können es als Programmiersprache verwenden. Was ich hier oben tun kann, ist, dass ich einige Variablen definieren kann. Ich werde nur einige PHP-öffnende und schließende Tags bekommen und ich werde sagen, in PHP übrigens definieren Sie Variablen mit einem $ Zeichen und dann dem Namen der Variablen. Wir werden diese Rubrik nennen, und ich werde das nennen, wie habe ich die Website vorher genannt? Lassen Sie mich einfach einen Schritt zurückgehen, „Unsere tolle Website“. Ich werde einfach alles zurücksetzen und dann wird die Überschrift nun Semikolon sein, um „Meine awesome Website“ zu beenden. Dann also hier unten, anstatt eine Zeichenfolge auszulegen, die nur der explizite Text ist, können wir Überschrift drucken. „ Meine fantastische Website“. Also sehen Sie hier, wir haben eine Variable gesetzt und jetzt setzen wir sie hier ein. Warum ist das wichtig? Nun, wir werden jetzt Back-End-Programmierung machen, damit wir Sachen wie eine if-Anweisung eingeben können. Wenn ich es nicht weiß, haben wir hier nicht wirklich viele Variablen eingerichtet, aber wenn eine weniger als zwei ist, lassen Sie uns die Überschrift auf „Meine nicht so tolle Website“ ändern . Eins ist weniger als zwei. Die Überschrift ändert sich also, wenn sie auf gesetzt wurde, wenn eine größer als zwei ist, würde sich die Überschrift nicht ändern. Hoffentlich zeigt das, wie wir einige Logik einsetzen und anfangen können , eine tatsächliche Programmierung zu machen, und eine Sache ich klarstellen möchte, ist gut, dass dieser Back-End-Code alle Serverseite ist. Was das bedeutet, ist, dass es passiert, bevor es zu Ihrem Browser kommt. Wenn wir hier tatsächlich die Seitenquelle betrachten, werden wir keine der Logik sehen, wir werden buchstäblich die Ausgabe sehen. In „Meine nicht so tolle Website“ würden wir diesen Code hier nicht sehen, denn was auf der Backend-Seite passiert, ist, dass alles herausgefunden wird, diese ganze Sache wird herausgefunden und dann sendet es nur eine gerade nach oben HTML-Datei an das Front-End. Wir sehen nur die Ergebnisse in unserem Browser, was auf dem Back-End passiert ist, wir sehen nicht den tatsächlichen Back-End-Code. Während, wenn wir in JavaScript schreiben, könnten wir zu unseren Entwickler-Tools gehen, schauen Sie in Quellen, die wir alle Skripte hier sehen können. Ich kann das ansehen, ich kann hier reinschauen, ich kann die Skripte sehen, ich kann die ganze Programmierung hier sehen, und wenn ich etwas mit JavaScript ändern sollte, sagen wir zum Beispiel, denken Sie daran, dass wir überprüfen Sie verschiedene Elemente der Seite. Wenn wir in der Lage waren, dies zu finden, da gehen wir, wir können dieses Element finden, das ist keine Anzeige. Wenn wir auf Get Started klicken, plötzlich, dass Änderungen leben vor uns und wir können diesen Code hier in unserem Skript-Foto sehen. Es ist alles Front-End, ist der Punkt, den ich mache. Aber alles, was wir in PHP programmieren, ist es eine Back-End-Sprache, also wird es nicht bis zum Front-End kommen. Alles wird Serverseite berechnet, also auf diesem Server, und dann ist das einzige, was es zu Ihrem Browser macht, das HTML, CSS und JavaScript. Hoffentlich hat ich tatsächlich Code in unsere Projekte eingefügt, es Ihnen etwas klarer gemacht, und im nächsten Video werden wir sehen, wie die Entwicklung eines PHP tatsächlich nützlich ist, jenseits einer Überschriftenvariablen zu erstellen und es dann zu setzen in einem Überschriften-Tag. Wir sehen uns in der nächsten. 13. MySQL: Im letzten Video haben wir mit PHP angefangen, aber wir haben nichts so Erstaunliches getan oder irgendetwas, was wir wirklich nicht hätten tun können, mit dem, was wir am Frontend tun können. Was wir das Back-End verwenden können, und es ist wirklich wichtig, das Back-End zu verwenden, ist die Interaktion mit einer Datenbank. Bevor wir noch mehr PHP-Code schreiben, möchte ich ein wenig über Datenbanken sprechen und tatsächlich eine Datenbank mit ein paar Tabellen erstellen. Ich werde diese volle Breite machen. Was ich tun werde, ist PHP admin zu öffnen. Wir können dies tun, indem wir auf Ihre MAMP Startseite oder WAMP Startseite gehen. Gehen Sie zu Tools und gehen Sie dann zu phpMyAdmin. Wenn Sie einen anderen Server als MAMP verwenden, müssen Sie möglicherweise nachschlagen, wie Sie auf phpMyAdmin zugreifen können, aber es sollte dort sein. Jetzt in phpMyAdmin, was wir tun können ist eine beliebige Anzahl von Datenbankfunktionen als Administrator zu tun. Wir können hier auf „Neu“ klicken und eine neue Datenbank erstellen. Ich werde nur diese Datenbank test_db aufrufen. Ich werde erstellen, und plötzlich haben wir eine Datenbank. Jetzt ist eine Datenbank ein Ort, an dem Sie Ihre Daten speichern, und es kann komplex sein, wie Sie sie strukturieren. Das Schwierigste bei Datenbanken ist, wie man sie entwirft und wie man alles perfekt gestaltet , so dass sich die Tabellen auf die effizienteste Art und Weise zueinander beziehen. Aber wir behandeln nur die Grundlagen hier, und so, was Sie von Datenbanken denken können, wie nur Auswahl oder Gruppen von Tabellen. Ein allgemeiner Objekttyp in Apps und Websites ist ein Benutzer. Ich werde dort anfangen und eine Tabelle für Benutzer erstellen. Ich werde diese Benutzer anrufen. Gehen Sie mit der Standardanzahl von Spalten zu gehen. Das erste Feld sollte eine eindeutige Kennung sein, also werde ich es nur ID nennen. Ich werde es nur auf INT behalten, was Integer bedeutet. Ich werde darauf klicken, um es unsigniert zu machen, was bedeutet, dass es nicht negativ ist. Ich werde es zum primären Index machen und auf „OK“ klicken. Ich werde hier klicken, die automatischen Inkremente, also anstatt die ID jedes Mal, jedes neue, jeden neuen Datensatz davon, den wir erstellen, zu definieren , wird automatisch eine neue ID angezeigt. Ich werde nur einige grundlegende Felder, Benutzername, und dann wählen wir den Typ Text. Sagen wir Passwort, TEXT und E-Mail, TEXT. Sie können auch einige Regeln festlegen, wie lange Sie diese Felder akzeptieren möchten. Wir brauchen das jetzt nicht wirklich, also können wir einfach auf „Speichern“ klicken oder auf „Vorschau SQL“ klicken. Warum ich Preview SQL erwähnen wollte, ist dies genau hier der SQL-Code, den der PHP, mein Administrator für uns generiert hat. Wenn wir das selbst schreiben wollten, könnten wir das einfach kopieren, auf die Registerkarte SQL gehen und das selbst schreiben und auf „Ausführen“ klicken. Wir würden das gleiche Ergebnis bekommen. Aber das strafft es offensichtlich für uns, macht es ein bisschen einfacher, interaktiv zu sein und so zu sein, und Sie brauchen keine Kenntnisse von SQL. Um diese Abfrage nur schnell zu betrachten, so dass Sie SQL erkennen können, wenn Sie es sehen. Wir haben ein paar Schlüsselwörter hier, CREATE TABLE. Dann definieren wir die Datenbank, auf die wir abzielen. Punktieren Sie den Tisch, den wir anvisieren. Die ID, die eine ganze Zahl ohne Vorzeichen ist, ist nicht null, was bedeutet, dass sie nicht leer ist und Inkrement anordnen wird. Dann der Benutzername, der nicht Nulltext ist, und das Passwort, Text nicht null, E-Mail, Text nicht null. Der Primärschlüssel ist ID und die Engine ist InnoDB. Ich klicke auf „Schließen“ und klicke auf „Speichern“. Sie können sehen, jetzt haben wir eine Tabelle, die in unserer Datenbank angezeigt wird. Wir können die verschiedenen Felder hier sehen. Was wir mit dieser Tabelle tun können, ist, dass wir einfügen können. Ich werde einen Benutzernamen eintragen. Sagen wir einfach Chris, für Passwort, Ich werde Chris Passwort eingeben. Hier unten tippe ich chris@christhefreelancer.com ein. Klicken Sie auf „Los, und wir haben eine neue Zeile. Genau hier ist der Code, den wir selbst hätten tun können, um eine Zeile in unsere Tabelle einzufügen. Wenn wir zurückgehen, um zu durchsuchen, können wir sehen, dass dies unsere Tabelle ist. Wir haben ID von 1, Benutzername von Chris, Passwort von Chris Passwort und E-Mail von chris@christhefreelancer.com. Jetzt, wie ich schon sagte, können wir SQL selbst ausführen, also werde ich zurück in die SQL kopieren, die wir zuvor generiert haben. Ich kann diese Details einfach ändern. Vielleicht ist es Denise und wir haben Denise Passwort, und ich möchte ihr Passwort mit allen teilen, also werde ich einfach denise@gmail.com eingeben. Wenn ich auf „Go“ klicke, sollte das funktionieren. Es sagt, kreuzen Sie eine Zeile eingefügt. Wenn wir zurückgehen, haben wir jetzt zwei Benutzer in unserer Datenbank und ich habe Denise falsch geschrieben, was bedeutet, dass ich einfach hier reingehen und auf „Bearbeiten“ klicken kann. Ihr Name ist nicht Dennis, sondern Denise. Diese E-Mail könnte wahrscheinlich irgendwo hinführen, aber es führt zu keiner Denise, die ich kenne. Was wir jetzt tun können, ist eine weitere Tabelle hinzuzufügen. Dies ist ein Vorsprung in relationale Datenbanken. Was ich tun werde, ist die ID erneut zu erstellen, und ich werde einen vorzeichenlosen primären Index machen, der wie zuvor automatisch inkrementiert wird. Was ich hier tun werde, ist in Besitzer-ID zu setzen. Was wir mit Besitzer-ID tun können, ist, dass im Zusammenhang mit einer ID in Benutzer, so können wir dieses Haustier in unserer Tabelle, Haustiere zu einem bestimmten Benutzer zuordnen . Ich werde hier den Namen eingeben, das einem Textfeld machen. Dann werde ich einen Typ erstellen, sagen wir, Typ. Das kann Hund sein, Katze, was auch immer, und wir werden auf „Speichern“ klicken. Jetzt haben wir diesen Haustiertisch. Lassen Sie uns gehen und fügen Sie einen Haustiernamen, Besitzer-ID. Lassen Sie uns es mir zuweisen. Ich war einer, also weisen Sie es mir zu. Ich nenne es Boris, und es ist ein Hund. Dann haben wir das da. Jetzt sind diese noch nicht wirklich verknüpft, und es gibt bestimmte Möglichkeiten, wie wir das in phpMyAdmin tun können, aber wir werden in diesem Kurs nicht zu tief in Datenbanken gehen. Aber was wir jetzt tun wollen, ist, diese Datenbank tatsächlich zu verwenden, mit dieser Datenbank zu interagieren, indem wir einen PHP-Code verwenden. Wir haben jetzt bereits unser Projekt, es hat bereits PHP darin. Der nächste Schritt für uns ist, sich mit dieser Datenbank zu verbinden und dann mit der Ausgabe von Sachen aus der Datenbank zu beginnen. Wenn wir das tun, werden Sie in der Lage sein, zu sehen, dass das Ganze zusammenkommt. Die Datenbank, die mit dem Backend arbeitet, um das Frontend zu erzeugen, und dann umgekehrt, wo wir das Frontend verwenden können , um eine Serveranfrage an das Backend zu senden, um die Datenbank zu manipulieren. Das ist im Wesentlichen der gesamte Web-Entwicklungszyklus. Ich freue mich, Ihnen das nächste Video zu zeigen , wo wir uns mit der Datenbank verbinden und unsere sehr einfache, aber hoffentlich sehr aussagekräftige Web-App erstellen werden . Wir sehen uns auf dem nächsten Video. 14. Zu einer Datenbank verbinden: Im letzten Video haben wir eine Datenbank erstellt. Wir haben einige Tabellen in diese Datenbank eingefügt, und dann haben wir einige Datensätze in diese Datenbanktabellen eingefügt. Jetzt in diesem Video werden wir endlich diese Datensätze in unsere Projekte mit PHP bringen. Der Weg dazu besteht darin, eine Verbindung zur Datenbank herzustellen und dann über SQL auf diese verschiedenen Datensätze zuzugreifen und dann mit PHP zu implementieren. Eine der Möglichkeiten, wie wir die Verbindung starten können ist, ich habe gerade einige Dokumentation hier von MAMP. Sie haben uns einen Code gegeben, mit dem wir hier arbeiten können. Ich werde nur alles kopieren, außer den Tags, weil wir sie bereits in unserem Projekt haben. Ich gehe zu meinem Code-Editor. Ich kann das loswerden, weil es sowieso albern ist. Dann kann ich diesen Beispielcode einfügen. Was wir jetzt tun müssen, ist, dies für einen bestimmten Umstand zu ändern. Wir betrachten keine Datenbank namens Performance Schema. Wir betrachten jetzt eine Datenbank namens Test DB. Nun, wenn wir alles richtig gemacht haben, sollte dies erfolgreich verbinden und wir sollten eine Erfolgsmeldung sehen. Es steht fest, dass erfolgreich verbunden ist. Der Grund dafür ist, dass wir hier Echo setzen. Echo ist eine weitere Möglichkeit, Text auf einem Bildschirm mit PHP auszudrucken. Wenn es eine Ära gäbe, wäre die Seite gestorben und dann, was wir den Fehler ausgespuckt hätten. Aber weil es erfolgreich verbunden ist, haben wir dieses Feedback bekommen. Jetzt, da wir wissen, dass wir eine Verbindung haben, geht es jetzt darum, die Daten, die wir haben, in unsere Anwendung zu bringen. Dafür habe ich hier einen weiteren Artikel von W3-Schulen. Sie haben dieses kleine Beispiel hier. Was wir bereits getan haben, ist, dass wir unsere Verbindung erstellt haben, also müssen wir das nicht noch einmal tun. Aber was wir tun müssen, ist eine SQL-Abfrage zu erstellen und dann das Ergebnis zu nehmen und hier eine Schleife über alle Ergebnisse zu machen. Dann geben Sie es auf der Seite aus, so dass Sie es tatsächlich sehen können. Ich werde das kopieren. Ich gehe hier zu meinem Code-Editor. Ich werde den Bildschirm zu maximieren und wo ich ausgeben möchte, ist hier unten. Ich werde ein anderes div erstellen. Ich gebe ihm einfach die Klassenreihe. Denken Sie daran, dass wir hier mit Bootstrap arbeiten, also ist Zeile eine Bootstrap-Klasse, die wir verwenden können. Dann werde ich unser PHP einfügen. Ich brauche die öffnenden und schließenden Tags. Weniger als Zeichen Fragezeichen, PHP, Fragezeichen, schließendes Tag. Dann zwischen hier geht der ganze Code hinein. Wir haben tatsächlich die abschließenden Tags bekommen. Ich muss das loswerden und das hier hineinschieben. Bewegen Sie das, Whoops, bewegen Sie das zurück. Was wir hier haben, ist das Web eine SQL-Abfrage zu erstellen und sie dieser Variablen zuzuweisen. Dies ist ein Beispiel. Was wir tun müssen, ist es für uns anzupassen und wir brauchen die ID nicht wirklich an sich. Aber wenn wir hier in unsere Tabelle gehen, haben wir Benutzernamen und Passwort. In diesem Beispiel lassen Sie uns nicht zeigen, wie Kennwort auf dem Bildschirm verwendet. Wir können Benutzernamen und E-Mail eingeben. Was wir hier sagen, wir wollen die Spalte Benutzername und die Spalte E-Mail auswählen. Dies muss bis zu diesen Spalten hier von übereinstimmen und dann ist dies der Tabellenname, also sind es nicht meine Gäste, seine Benutzer. Eine andere Sache, die wir hier ändern müssen, ist das Objekt, das unsere Verbindung definiert. In diesem Beispiel hier haben sie conn als Verbindung verwendet. Sie können hier sehen, conn entspricht dem neuen MySQL. Es ist die Verbindung zu dieser Variablen zugewiesen. Aber in unserem Beispiel, wenn wir nach oben scrollen, haben wir die Verbindung zu dieser Variablen zugewiesen. Ich gehe auf das klicken und dann die Erwähnung von conn hier ersetzen. Was wir hier dem Ergebnis zuweisen, ist, dass wir tatsächlich die Verbindung nehmen , wo wir mit einer Methode namens Abfrage das SQL einfügen, das wir gerade hier in diese Methode der Abfrage aufgebaut haben. Es wird uns ein bestimmtes Ergebnis zurückgeben und dann werden wir es in dieser Variablen speichern. Dann hier unten, was wir fragen werden, ist ob die Anzahl der Zeilen, die aus den Ergebnissen kommen, größer als Null ist, wir werden etwas ausgeben. Andernfalls werden wir nur Null Ergebnisse ausgeben, der Text Null Ergebnisse. Am Ende werden wir dann unsere Verbindung zur Datenbank schließen. Was wir hier unten tun müssen, ist, diese Felder erneut zu ändern, so dass wir keine ID anzeigen. Es kann tun, ist das loswerden. Wir zeigen den Benutzernamen an. Anstelle des Namens werde ich den Benutzernamen setzen. Dann anstelle des Vornamens hier, werde ich einen Benutzernamen eingeben und zu dem gehen, was es sonst noch gibt? Wir haben hier eine E-Mail, die wir hier abgeholt haben. Wir können E-Mails mit einem Doppelpunkt machen. Dann können wir ändern, was wir hier anvisieren, um eine E-Mail zu senden. Dann ein BR-Tag am Ende. BR bedeutet nur, dass es ein Break-Tag in HTML ist und es bedeutet nur, zur nächsten Zeile zu gehen. Wenn wir Glück haben, haben wir einen Code richtig geschrieben und das wird tatsächlich funktionieren. Ich werde die Seite aktualisieren und etwas ist passiert. Ich werde das untersuchen, weil es aussieht, als wäre es hier abgeschnitten. Warum funktioniert das nicht? Nun, wir haben noch einen Tippfehler in unserem Code. Das heißt, wir haben den Namen unserer Verbindung hier unten nicht geändert, und auch wir haben unsere Verbindung hier oben bereits geschlossen. Was ich hier tun werde, ist con durch MySQL zu ersetzen und diese Nähe loszuwerden, weil wir es hier schließen werden. Ich klicke auf „Speichern“. Ich werde die Seite aktualisieren. Wir bekommen jetzt Felder aus der Datenbank. Zugegeben, sie sehen jetzt ziemlich schrecklich aus, aber wir können sie immer mit unserem Wissen über Front-End-Code aufpeppen. Anstatt dessen, was ich tun werde, ist, dass ich ein div erstellen werde. Wir können hier einfügen, was HTML wir wollen. Div hier, Schließen div. Ich werde dies nennen, geben Sie diesem eine Klasse von DB, Zeile. Klicken Sie auf „Speichern“, aktualisieren Sie die Seite. Nicht viel hat sich geändert, weil wir keine Stile angewendet haben. Eine Sache, die ich zuerst tun möchte, ist, dass diese Zeile nicht innerhalb des Containers ist, also das ist das erste, was ich reparieren würde. Ich würde hineingehen und das in den Container div verschachtelt setzen. Es ist jetzt im Container. Was wir tun können, ist ein paar weitere Stile anzuwenden, um es ein wenig schöner aussehen zu lassen. Das liegt an Ihnen, wie Sie es tun möchten. Aber lassen Sie uns einen Punkt machen, weil wir eine Klasse, DB Zeile, offene geschweifte Klammern haben, um unsere Stile zu definieren, und lassen Sie uns einfach , dass mehr Marge nach unten geben , so dass wir 10 px bekommen. Laden Sie die Seite ist ein wenig mehr Rand dort. Vielleicht wollen wir den ersten Teil davon, mutig. Wir können das ohne CSS tun. Wir können einfach HTML verwenden, um ein starkes Tag zu erstellen. Alles, was in einem starken Tag ist, wird das Schriftlicht Boulder sein. Normalerweise können wir es für andere Zwecke verwenden. Ich kann stark hineinlegen. Dann können Sie jetzt sehen, dass die Beschriftung fett ist und das Ergebnis nicht fett ist. Wir haben eine Verbindung zu unserer Datenbank hergestellt. Wir haben Artikel aus unserer Datenbank abgerufen. Sie können jetzt beginnen zu sehen, dass das Backend für uns funktioniert. Das Gute an der Datenbank ist, dass sie dauerhaft ist. Wenn wir hier etwas ändern, lassen wir die Datenbank dort sitzen. Immer wenn wir auf die Website kommen, wenn wir eine Änderung vorgenommen haben, wird es auftauchen. Um dies zu demonstrieren, werde ich jetzt eine Änderung in der Datenbank vornehmen. Ich werde einen anderen Benutzer einfügen, nennen Sie diesen Benutzer Marco ist positiv, es wird Marco Polo sein, und es wird Marco @gmail sein. Allerdings ändern wir die Datenbank, wo das Lesen direkt aus der Datenbank auf diese Webseite. Es sollte erscheinen, egal wie wir diese Datenbank ändern und es tut. Dies ist im Wesentlichen das Back-End, das für uns arbeitet. Wieder, wenn wir dies überprüfen würden, würden wir keinen Back-End-Code sehen. Wir würden buchstäblich nur sehen, eine Reihe von DB stieg mit dem Ausgabe-HTML-Code. Das ist gut für die Sicherheit. Wir wissen nicht, was im Backend los ist. Obwohl das wirklich wichtig ist, ist aus vielen Gründen, aber eine, die ich Ihnen jetzt zeigen kann, und das ist, dass wir alle diese Informationen hier mit einem Benutzernamen und Passwort haben. Wir wollen definitiv nicht, dass jemand der auf unsere Website am anderen Ende zugreift, das sehen kann. Wenn es wie zum Beispiel JavaScript-Code war , wenn wir das einfach in eine JavaScript-Datei einfügen, können wir unsere Entwickler-Tools öffnen, ins Netzwerk gehen, sorry, Quellen, nicht Netzwerk. Wir können reingehen und sehen, was die Skripte sind. Aber auf dem Back-End gibt es keine Möglichkeit, diese Konfigurationsdaten zu sehen. Dies ist ein Grund, warum, wenn Sie eine Verbindung mit der Datenbank herstellen, wenn Sie mit Benutzerinformationen arbeiten. Wenn Sie Informationen basierend darauf trennen, ob jemand eingeloggt ist und Sie nur Informationen anzeigen möchten, zu denen dieser Benutzer berechtigt ist, dann muss alles sicher sein. Deshalb ist es sehr wichtig, dass wir das Back-End haben um sich mit der Datenbank zu verbinden und auch sehr privat zu sein. Hoffentlich können Sie jetzt die Rolle des Back-Ends verstehen und wie wir eine Verbindung zu einer Datenbank herstellen können. Auch hier eine sehr einfache Erklärung oder Demonstration , wie das Back-End funktioniert mit einer Datenbank. Wir könnten einen vollständigen Kurs auf PHP mit MySQL machen und durchgehen, wie wir diese Datensätze erstellen, aktualisieren und löschen können. Aber das ist ein Überblick über die Webentwicklung. Wir haben keine Zeit, in riesige 12 Stunden zu gehen. Es könnte 12 Stunden Kurs sein, um ehrlich zu sein. Wenn Sie am Ende bleiben wollen und tatsächlich ein PHP MySQL-Projekt machen möchten. Ich werde am Ende ein paar Empfehlungen haben. Aber im nächsten Video, werden wir zu bekommen, wie man tatsächlich, was heißt, diese Website bereitstellen, was bedeutet, es auf einen Server zu setzen, auf den von überall zugegriffen werden kann und im Grunde eine Live-funktionierende Website zu schaffen. Ich freue mich, Ihnen zu zeigen, wie Sie Ihre neue kleine Basis-App bereitstellen können. Wir sehen uns im nächsten Video. 15. Beginn Teil 1. 1: Domäne: In den nächsten Videos werden wir unsere Website bereitstellen, und bereitstellen ist nur ein Entwicklerbegriff bedeutet, wir stellen unsere Website auf einem anderen Server, und wir werden unsere Website im Web bereitstellen, die bedeutet, dass wir es einfach auf einen anderen Server stellen damit wir von überall auf der Welt auf unsere Website zugreifen können. Im Wesentlichen stellen wir unsere Website ins Internet. Im Moment wird es nur auf unserem lokalen Computer gespeichert, und wir betreiben einen Server lokal, aber wir müssen unsere Website auf einen Server setzen , der mit dem Internet verbunden ist und rund um die Uhr läuft, damit die Leute auf unsere Website zugreifen können die Uhr von überall aus. Die beiden Konzepte, die wir verstehen müssen, um diese Domains und Hosting zu tun, und viele Leute denken, dass Domains und Hosting sind die gleiche Sache, aber sie sind definitiv nicht. Also, was ich tun werde, tun Sie einfach eine Google-Suche nach dem Unterschied zwischen Domain und Hosting, und starten Sie einfach Ihre Forschung dort, um herauszufinden, was der Unterschied ist, wenn Sie extra lesen müssen, aber ich werde klicken Sie auf den ersten Artikel und werfen Sie einen Blick auf dieses Haus Analogie. Im Wesentlichen ist Ihre Domain eine Adresse. Wenn Sie kaufen, sagen wir einfach skillsharecourse.com, oder so etwas, dass Sie nur die Adresse bekommen. Du bekommst nur den Domain-Namen. Sie bekommen nicht wirklich einen Ort, um tatsächlich mit dem Aufbau Ihrer Website zu beginnen. Sie können sich den Domainnamen als nur eine Adresse vorstellen, und diese Adresse verweist auf den Standort Ihrer Website, die irgendwo gehostet wird. Diese Dateien müssen irgendwo auf einer Hosting-Plattform auf einem anderen Webserver sitzen, und das ist, was Ihre Website zu bedienen. Sie können sich vorstellen, in diesem Haus Analogie, der Domain-Name ist nur Ihre Adresse, und das Haus selbst hostet in dieser Analogie. Der erste Schritt wird sein, um Ihre Domain zu erhalten, und im Wesentlichen, was passiert, wenn Sie eine Domain registrieren, ist es geht in ein zentralisiertes System namens DNS. Ich werde nur eintippen: „Wo werden Website-Domains gespeichert?“ Auf howstuffworks.com können Sie alles darüber lesen, wo Ihre Domain gespeichert ist. Im Grunde, was Sie tun, wenn Sie eine Domain auf GoDaddy registrieren, oder Namecheap, oder eine dieser Domain-Kauf Websites, ist Sie im Grunde bekommen eine Auflistung in diesem ganzen DNS-System. Wie erhalten wir eine Domain? Nun, das hättest du vielleicht schon mal gesehen. Wir können zu einer beliebigen Anzahl von Domain-Providern gehen. GoDaddy ist ein beliebter, und sie sind auch ein Gastgeber. Ich bin mir ziemlich sicher, wenn Sie zum Hosting gehen, können Sie ein Hosting-Konto kaufen, das mit einer Domain kommt, aber wenn wir einfach auf „Domains“ klicken und eine Domain finden, würden wir nur die Domain und ihre Website bekommen. GoDaddy ist eigentlich nicht notwendigerweise der billigste. Es gibt eine andere namens Namecheap, und anscheinend registriere ich nur eine Domain, die ich nicht wirklich verwenden werde, sondern nur als Beispiel zeigen. Ich werde Namecheap verwenden und ich werde skillsharecourse eingeben, und jetzt wird es alle Ideen laden, alle verfügbaren Domains, die wir haben könnten. SkillShareCourse.com ist ziemlich sicher, dass das nicht verfügbar ist, aber wir können all diese obskuren wie skillsharecourse.xyz und skillsharecourse.space bekommen . Ich werde nur eine der billigeren wählen, weil dies nur ein Beispiel ist, also werde ich in den Warenkorb gehen. Es wird mich einen australischen Dollar kosten. Wir brauchen keine der Extras, also werde ich es bestätigen. Loggen Sie sich in mein Konto ein, weil ich bereits ein Konto bei Namecheap habe, und überprüfen Sie meine Daten, zahlen Sie jetzt. Es wird mit der Bearbeitung Ihrer Bestellung beginnen, und voila. Ich habe gerade skillsharecourse.space gekauft, und was ich jetzt tun kann, ist, dass ich auf „Verwalten“ klicken kann und das sollte bei allen Domain-Anbietern ähnlich sein. Hier ist eine Liste der anderen Domains, die ich habe. Ich kann nach skillsharecourse.space gehen, klicken Sie auf „Verwalten“ und warum wir sofort auf „Verwalten“ klicken, ist es, auf unsere Nameserver zu gehen. Genau hier haben wir Domänenserver, die wir einrichten müssen. Dies ist im Grunde, wo wir unsere Domain zu verweisen, wo unsere Website gespeichert ist. Also im Wesentlichen, wo unser Hosting ist. Nun, weil Namecheap, na ja, sie tun Hosting, aber wenn wir zum Beispiel unsere Website auf Namecheap hosten würden, haben wir bereits eine Domain gekauft, so dass wir diese einfach als Namecheap basic DNS verlassen konnten. Nur um zu wiederholen, dass Sie, wenn Sie Ihre Website an der gleichen Stelle hosten, an der Sie Ihre Domain gekauft haben, wahrscheinlich nicht brauchen, um Ihre DNS-Einstellungen zu ändern. Sie sind bereits so eingestellt, dass sie auf die Website weitergeleitet werden, auf der Sie sie gekauft haben, aber wenn Sie Ihre Website auf einem anderen Host hosten , der sich von dem, an dem Sie Ihre Domain gekauft haben, müssen Sie sich hier mit benutzerdefiniertem DNS, , an die diese Domain weitergeleitet werden soll. Nun liegt die Wahl, wo Sie Ihre Website hosten, bei Ihnen. Ich hoster mit meinem Reseller-Konto auf einem Host namens Netorigin in Australien. Ich würde nicht unbedingt empfehlen, dass für Sie, wenn Sie in den Vereinigten Staaten sind, oder in Großbritannien, oder wo auch immer Sie sonst auf der Welt sind, aber für mich in Australien, das ist der Host, den ich benutze, aber unabhängig davon, ob Sie Host oder nicht, oder jeder Host, den Sie verwenden, die Sache, die Sie tun müssen, um Ihre Domain mit Ihrem Hosting zu verknüpfen, ist, die Nameserver dieses bestimmten Hosts zu finden. Für mich ist es Netorigin, und so mache ich es. Ich werde nur Netorigin DNS-Server eingeben, und wenn Sie mit GoDaddy gehen, könnten Sie goDaddy.DNS-Server eingeben, und genau hier gibt es einen Knowledge Base-Artikel von Netorigin, das ist die Firma, die ich benutze, und hier sind einige Domain-Name-Server. Ich kann die erste nehmen, sie dort reinlegen, die zweite steckte sie da rein, und Sie brauchen wahrscheinlich nicht alle vier, aber ich denke, die sind nur für die Verstärkung. Legen Sie es dort hinein, und dann werde ich auf „Tick“ oder was auch immer es ist, auf Ihrer speziellen Domain Sache, die Sie verwenden, um zu registrieren. Wie es hier oben sagt, kann es 48 Stunden dauern, um wirksam zu werden, aber es ist oft sehr viel kürzer als das, aber bald genug werden wir unseren Domain-Provider mit unserem Hosting-Provider verbunden haben, und was passieren wird, ist, wenn Sie diese Domain es wird Websites auf diesem Domain-Name-Server nachschlagen, und Ihr Host, unabhängig von Netorigin oder GoDaddy, oder wer auch immer es ist, wird Ihre Website finden und Ihnen zur Verfügung stellen. Was ist, wenn du noch keinen Gastgeber wie mich hast? Nun, wie ich schon sagte, du kannst irgendwohin wie GoDaddy gehen. Ich schreibe GoDaddy immer wieder falsch. Ich wusste nicht, dass es tatsächlich eine Website namens GoDay gibt. Sie können zu GoDaddy gehen, klicken Sie auf „Hosting“ und kaufen Sie einige Web-Hosting. Sie können Wirtschaft kaufen, es ist nur fünf Dollar pro Monat, und dann, was Sie tun, wenn Sie sich für Hosting registrieren, ist, wenn sie nach Ihrem Domain-Namen fragen, können Sie, dass in setzen. Mit GoDaddy bieten sie Ihnen jedoch eine kostenlose Domain an. Es ist wahrscheinlich kostengünstiger für Sie nur Ihre Domain zusammen mit Ihrem Hosting zu bekommen, und Sie müssen diese nicht einmal miteinander verknüpfen, aber für mich habe ich mein Hosting auf Netorigin, und ich wollte nur ein günstige Domain auf Namecheap. Also diese Verknüpfung ist notwendig, und auch es geht nur um Ihnen den Unterschied zwischen Domains und Hosting zu zeigen. Wenn ich zu GoDaddy gehen und das Web-Hosting mit der freien Domain bekommen, kann ich den Unterschied zwischen Domains und Web-Hosting nicht vollständig verstehen, weil sie es so einfach machen, die beiden zusammen zu setzen. Also denke ich, dass selbst wenn Sie sich entscheiden, mit einem Host zu gehen, der Ihnen eine kostenlose Domain gibt, und verknüpfen Sie sie automatisch, es ist gut, den Unterschied zwischen Domains und Hosting zu kennen, und in der Lage sein, es in Zukunft zu verknüpfen, wenn Sie brauchen zu. 16. Beginn Teil 2: Dateien: In Ordnung, also jetzt sollten Sie Ihre Domain haben, die Sie über eine Domain-Registry wie Name Cheap registriert haben und Sie sollten Ihr Hosting haben, das Sie sich am gleichen Ort oder irgendwo anders registriert haben , wenn sie sind irgendwo anders, sollten Sie sie miteinander verknüpft haben, indem Sie Ihre benutzerdefinierten Domain-Name-Server einfügen. Der nächste Schritt wird also sein, auf Ihr Bedienfeld zuzugreifen und wenn Sie sich vorher erinnern, im letzten Video, sagte es, dass es bis zu 48 Stunden dauern würde, um unsere Domain mit unserem Hosting zu verknüpfen. Aber es dauert oft viel weniger Zeit und ich habe es etwa 5-10 Minuten verlassen und es ist bereits verknüpft. Was ich also tun werde, ist zunächst zu überprüfen, ob wir auf unsere Systemsteuerung zugreifen können und dann auch einige Dinge auf unserer Systemsteuerung ändern und damit beginnen, unsere Website zu implementieren. Ich werde die Adresse unserer Website eingeben , die SkillShareCourse.space/cPanel war. Ich drücke „Enter“ und cPanel ist nur ein standardisiertes Bedienfeld, mit dem Sie viele Funktionen auf Ihrer Website ausführen können. Es ist viel besser, es zu sehen und damit zu interagieren, als es aus der Ferne zu beschreiben. Also, was ich tun werde, ist loggen Sie sich ein und zeigen Sie es sofort. Also werde ich einen Namen verwenden, den wir auf der Hosting-Plattform eingerichtet haben. Ich habe das privat gemacht, aber für dich hast du das vielleicht auf GoDaddy oder einer anderen Anzahl von Gastgebern getan und dann haben wir unser Passwort eingegeben und wir loggen uns ein. Dies ist cPanel und es gibt Ihnen einen Dateimanager, Sie können gehen und Ihre Dateien ändern, es gibt phpMyAdmin, so dass wir unsere Datenbank Sachen dort machen können. Wir können Anwendungen wie WordPress oder Joomla Press installieren , um mit einem Klick im Grunde einkaufen, wir klicken einfach dort und klicken Sie dann auf „Installieren“. Das ist sehr praktisch. Wir können Subdomains erstellen, können wir E-Mail-Konten erstellen. Es gibt viele verschiedene Dinge, die wir tun können, viele von denen ich noch nicht einmal getan habe. Was ich will, dass du jetzt tust, ist, dass du zu deinem Dateimanager gehst , und ich möchte, dass du hier reinsiehst. Ordnung, also wenn wir diese Struktur betrachten, können wir sehen, dass wir unser Home-Verzeichnis haben und wir diese verschiedenen Ordner haben, ETC, Protokolle, Mail, öffentliches FTP, HTML, SSL, TMP. Sie müssen nicht wissen, was all diese tun, aber wenn Sie einen Ordner namens öffentliches HTML haben, klicken Sie auf jeden Fall darauf, weil Sie dort Ihre Website platzieren werden , denn wenn Sie auf Ihre Domain klicken, wird es die -Website von diesem Standort aus. Im Moment haben wir gerade dieses zufällige Foto von CGI-Mülleimer, das komplett leer ist, also gibt es kein Risiko in dem, was du gerade damit machst, weil es völlig leer ist. Der nächste Schritt wäre also, unsere Website in diesen Dateimanager hochzuladen. Also, was ich dafür tun werde, ist, dass ich zu meinem Skillshare Kurs mein Projektordner gehen werde . Ich gehe zurück, ich werde es hier finden, und dann werde ich es packen, damit wir es als eine Datei hochladen können. Also auf dem Mac, ich drücke „Compress“ und ich bekomme eine ZIP-Datei. Also werde ich hier gehen, ich werde auf „Hochladen“ klicken. Ich werde die Zip-Datei greifen, die hier ist, es wird hochgeladen. Ich gehe zurück und dann aus unserem Dateimanager, ich kann darauf klicken und klicken Sie auf „Extrahieren“, ich denke, ist das Wort auf dem C-Panel. Also jetzt haben wir das, weil ich es auf einem Mac komprimiert habe, wir haben diesen MacOSX-Ordner, sondern wir können das löschen und dann ist hier unsere Website. Wir müssen das alles packen und es wieder zurückschieben. Anstatt dieses Foto, wir das einfach loswerden und es in öffentliche HTML verschieben. Gehen Sie zurück in öffentliche HTML, dieser Ordner ist jetzt leer, so dass wir ihn löschen können. Wallah, wir haben unsere Webseite da oben. Nur eine Sekunde. Ich denke, wir werden diese ZIP-Datei auch löschen, aber ja, wir haben unsere Front-End-Assets dort, und mal sehen, was passiert, wenn wir jetzt unsere Domain eingeben. SkillShareCourse.space. Wir werden einen Datenbankverbindungsfehler bekommen, und das überrascht mich überhaupt nicht, weil wir jetzt einen wichtigen Schritt vergessen haben, und das ist, dass wir unsere Datenbank nicht eingerichtet haben. Also, alle Dateien einzufügen ist alles gut und gut, aber wir haben hier definiert, wenn Sie in die Datei klicken und dann auf „Bearbeiten“ klicken, können Sie die Datei direkt von Ihrem Dateimanager bearbeiten. Wir haben all diese Informationen. Wir haben all diese Server und Datenbank zu verbinden und die Datenbank ist wirklich eine separate Einheit, so dass nur unsere Dateien hier rein zu setzen ist nicht genug. Wir müssen auch unsere Datenbank einrichten und diese auch quer kopieren, damit wir das im nächsten Video tun werden. 17. Beginn Teil 3: Datenbank: Im letzten Video haben wir unsere Website-Dateien auf unseren neuen Host hochgeladen, aber eine Sache fehlt, und das ist unsere Datenbank. Deshalb, wenn wir auf eine Website gehen, sagt es Verbindungsfehler. Das ist ein gutes Zeichen in dem Sinne, dass wir wissen, dass unsere Website jetzt den Code lädt, den wir erstellt haben, aber wir haben die Datenbank nicht wirklich auf diesem entfernten Server eingerichtet. Natürlich werden wir einen Verbindungsfehler bekommen. Nun, nur um klar zu sein, wenn wir keine Verbindung zur Datenbank hätten, würden wir vielleicht eine App hochladen, die nicht einmal ein Back-End hatte, hätten wir kein Problem. Ich möchte das nur schnell demonstrieren. Du musst nicht mitmachen. Aber wenn wir graben, zurück zu dem, was es war, bevor war hasst HTML, und ich klicke auf Bearbeiten, und ich habe gerade alle PHP losgeworden, was in einem HTML-Dokument sowieso keinen Sinn ergeben würde. Denken Sie daran, dass wir diese Datei lokal speichern damit Sie sich keine Sorgen machen müssen, Ihren Fortschritt zu verlieren. Wir können es einfach schnappen, solange wir es auf unserem Computer gespeichert haben. Ich klicke auf „Speichern“. Ich werde nur noch einmal nachsehen. Es gibt kein PHP. Ich gehe zurück zu meiner Website, aktualisiere die Seite und du kannst sehen, dass wir jetzt die beste Website aller Zeiten haben. Mir wurde gerade klar, dass wir hier etwas PHP haben. Wir hatten die Überschrift, so kann ich in Beste Website aller Zeiten setzen. Ich glaube, das war nicht der Name, aber alles gut, aber wir können zurückkehren. Sie können sehen, dass wir eine Website live im Internet haben. Aber wir wollen eine Website bereitstellen, die mit einem Back-End verbunden ist, mit einer Datenbank. Ich werde nur diese Datei löschen und dann unsere PHP-Datei erneut hochladen. Ich gehe zurück zu meinem Schulaktionskurs setze das wieder ein. Es ist hochgeladen. Ich kann hierher zurückgehen und wir werden diesen Verbindungsfehler erneut bekommen, weil wir die Datenbank einrichten müssen. Was wir tun können, ist phpMyAdmin zu verwenden. Das gleiche Programm, das wir auf unserem lokalen Kartenserver verwendet haben, können wir auch auf einem Host verwenden. Was ich tun werde, ist unser phpMyAdmin zu finden. Sie können über hier darauf zugreifen, aber wenn Sie diese Seite nicht haben, können Sie auch Ihren Hostnamen nehmen und dann /phpMyAdmin eingeben. Was wir hier tun werden, ist auf Test db klicken, und wir werden alles hier exportieren, damit wir es schnell auf Ihrem Host importieren und dann beginnen können , eine Verbindung zu ihm zu erstellen. Ich werde einen schnellen Export machen. Dies ist der SQL-Code, der alles erstellt. Wir müssen nur das alles kopieren. Dann gehen wir zurück zu unserem cPanel, und von hier aus werden wir phpMyAdmin verwenden, die hier in nur einer Sekunde ist. Aber zuerst müssen wir diese Datenbank erstellen, die wir auf unserer lokalen Website erstellt haben, die Testdatenbank, weil sie noch nicht auf unserem Host existiert. Ich werde auf MySQL-Datenbanken klicken, und ich werde eine neue Datenbank erstellen. Ich werde es nur „Test“ nennen. Es ist erstellt und Sie können hier runter gehen und sehen, dass es skillsharecourse_test hat. Es zwingt uns, es mit diesem zu benennen, die der Name unserer Website ist. Was wir jetzt tun müssen, ist einen Benutzer zu erstellen, um auf diese Datenbank zuzugreifen. Ich werde nur diesen Benutzer admin anrufen, und ich werde für das Passwort eingeben. Sie können eingeben, was Sie wollen. Ich werde nur ein Passwort generieren, zufällig hier oben in meinem einen Passwort-Manager. Es gibt eine sehr starke Passwörter. Vergewissern Sie sich, das zu kopieren. Ich werde ein neues Dokument erstellen , nur damit ich diesen Weg speichern kann. Du willst es nicht verlieren. Das ist das Passwort, das ich ausgewählt habe, dann erstellen Sie Benutzer. Jetzt haben Sie erfolgreich einen Datenbankbenutzer erstellt. Nun ist das letzte, was Sie tun möchten, den Benutzer zur Datenbank hinzuzufügen. Der Benutzer wird skillsharecourse/admin sein, und die Datenbank ist skillsharecourse_test. Klicken Sie auf Hinzufügen, und geben Sie ihm alle Privilegien. Klicken Sie auf Änderungen vornehmen, und die Änderungen wurden vorgenommen. Jetzt können wir zu phpMyAdmin gehen, was wir tun können, indem wir hier klicken. Gehen Sie in phpMyAdmin, und von hier aus können Sie sehen, dass wir unseren skillsharecourse_test haben. Jetzt sollten Sie das erste, was Sie bemerken sollten, ist, dass es sich in seinem Namen von unserer Testdb unterscheidet , die test db ist. Wir werden auch dort einige Änderungen vornehmen müssen. Aber wir können hier, in unsere SQL gehen und über unsere Abfrage kopieren. Wir haben mittlerweile ein Passwort, also muss ich zurück zu hier gehen, diese Abfrage kopieren, die wir vorher dort gestellt haben, sie hier einfügen. Anstelle von test db werde ich dies in skillsharecourse_test ändern, was ein neuer Datenbankname ist. Suchen Sie nun nach anderen Referenzen von test_db. Das sollte sein tut nicht mehr. Wenn wir jetzt auf Go klicken, sollte es diese Datenbank auswählen und dann alle unsere Tabellen importieren. Hoffentlich, mal sehen, ob es funktioniert. Es sagt, dass keine Datenbank ausgewählt ist. Was wir tun werden, ist, dass wir in die Datenbank gehen und dann die SQL aus dem Kontext dieser Datenbank setzen. Ich gehe zurück hierher, setze den Namen der Datenbank erneut ein, klicke auf Los. Tischhaustiere sind bereits vorhanden. Es sieht so aus, als ob unser Import bereits funktioniert hat. Wir können jetzt hineingehen und sehen, dass wir unseren Tisch für unsere Benutzer und jetzt Tisch für die Haustiere haben. Nun, es ist ein Fall, alle Informationen zu verwenden. Der Datenbankname, der neue Benutzer, den wir erstellt haben, und jetzt ändern, dass in unserem Code, so dass wir eine Datenbankverbindung erhalten können. und das wird die letzte Etappe sein, um unsere Website zu zeigen. Lasst uns das jetzt machen. Wir haben unsere Datenbank jetzt in unserer neuen Website. Was wir tun müssen, ist unsere Datei index.php zu aktualisieren, weil der Name der Datenbank geändert wird und auch der Benutzer , den wir verwenden, um auf diese Datenbank zugreifen, hat sich geändert. Wenn wir hier rüber gehen und in unseren Index php gehen, können wir es bearbeiten. Wenn Sie doppelklicken, wird es heruntergeladen. Sie möchten nur einmal darauf klicken und dann auf Bearbeiten klicken, und Sie können es direkt in Ihrem Browser bearbeiten. Wenn du kleine Änderungen wie diese machst, ist das okay. Aber wenn Sie große Website-Änderungen vornehmen, würden Sie wahrscheinlich mit FTP gehen wollen, das Sie hier unten zugreifen können. Das ist ein bisschen mehr von wo können Sie darauf zugreifen, die Sie von hier zugreifen können. Aber das ist eher ein fortgeschrittenes Konzept. Für jetzt, was wir tun, ist es völlig in Ordnung, nur den Datei-Manager zu verwenden. Was wir tun werden, ist diese Felder hier zu aktualisieren, dass Benutzername, Passwort, Host und Datenbank. Die einfache, die wir kennen, ist, dass die Datenbank nicht mehr test db ist, es ist skillsharecourse_test. Ich werde das da reinlegen. Ich habe intuitiv Command S gedrückt, um zu speichern, aber Sie tun das nicht, wenn Sie den Datei-Manager verwenden. Zurück zu hier, wenn wir uns nicht an unseren Benutzernamen erinnern, können wir einfach in MySQL-Datenbanken gehen und die aktuellen Verwendungen überprüfen. Unser Benutzername war skillsharecourse_admin. Wir können hierher zurückgehen und das als Benutzername eintragen. Denken Sie daran, ich habe ein Dokument erstellt, um unser Passwort zu speichern. Ich gehe rein, kopiere das und setze das Passwort ein. Jetzt für DB HOST können wir es einfach als localhost belassen. Klicken Sie auf Speichern. Gehen Sie zu unserem Projekt, aktualisieren Sie die Seite und lassen Sie uns sehen, was passiert. Verbindung erfolgreich und wir haben unsere Website hier und alle unsere Verweise auf die Datenbank noch funktionieren. Das einzige, was sich wirklich änderte, war der Name unserer Datenbank, aber alles im Inneren ist gleich. Auch der Benutzer, der eine Verbindung mit der Datenbank herstellt, also nur um einen Benutzer zu haben, der sich bei der Datenbank anmeldet. Alles, wenn wir uns in die Datenbank eingeloggt haben, ist gleich. Die Tabelle, in der Namen die gleichen waren, die Felder waren die gleichen, und deshalb haben wir plötzlich eine Website hier. Im nächsten Video werde ich Ihnen zeigen, wie Sie Ihre Website live mit FTP bearbeiten würden. Denn wenn Sie immer wieder Änderungen vornehmen möchten, möchten Sie es nicht wirklich im Dateimanager tun. Wahrscheinlich möchten Sie es wahrscheinlich zuerst lokal machen , wenn Sie viel Entwicklung machen, also bearbeiten Sie es hier und portieren Sie es dann über. Es gibt viele Möglichkeiten, eine fortschrittlichere Bereitstellung bereitzustellen. Aber ich wollte dir nur schnell FTP zeigen weil es wichtig ist, als Webentwickler zu wissen. Wir sehen uns im nächsten Video. 18. Verwendung von FTP: Im letzten Video haben wir unsere index.php mit dem eingebauten Editor in unserem cpanel Dateimanager aktualisiert . Aber in diesem Video werden wir über FTP sprechen, das für File Transfer Protocol steht. Was wirklich vorteilhaft an FTP in unserer Situation ist zum Beispiel sagen wir, dass wir diese Dateien nicht innerhalb dieser Cloud-Schnittstelle bearbeiten wollen. Vielleicht möchten wir sie mit unserem Code-Editor Adam bearbeiten, denn zumindest ist es für mich viel schöner zu verwenden und wir können alle unsere Dateien hier schnell editierbar haben. Es macht es einfach einfacher. Wir können unsere lokalen Tools verwenden, um Live-Änderungen an unserer Website vorzunehmen. Nun, ein Haftungsausschluss, je nachdem, wie groß Ihre Website ist oder welche Änderungen Sie vornehmen, möchten Sie möglicherweise keine Live-Änderungen vornehmen, also sollten Sie wahrscheinlich alles lokal erstellen, alles auf Ihrem lokalen Host hier entwickeln, Überprüfen Sie, ob es funktioniert, und beginnen Sie dann, es zu migrieren. Es gibt anspruchsvollere Möglichkeiten, als nur die Dateien zu kopieren, wie wir es getan haben. Sie können das auch über FTP tun, aber sagen Sie zum Beispiel, es gab eine kleine Änderung oder irgendetwas, von dem Sie denken, dass es kein großes Problem verursachen wird , und Sie wollten dies mit Ihrem eigenen Code-Editor bearbeiten, wir können verwenden, was als FTP bezeichnet. Ich dachte, das wäre wichtig, um FTP einzuschließen, weil es etwas ist, das ich die ganze Zeit mit meinen Projekten verwende. Wir gehen zurück zu cpanel hier, und wir gehen zurück auf die Homepage. Was wir tun können, um ein FTP-Konto zu erstellen, ist auf FTP-Konten klicken. Hier werde ich nicht zu kreativ sein, ich werde es nur FTP-Konto nennen. Ich gehe zu einem Passwort, um ein zufälliges Passwort zu generieren, um zu verwenden. Was hier wichtig ist, ist das Verzeichnis, damit Sie all dies loswerden möchten , denn standardmäßig hat es einen Abschnitt über die Menge an Informationen, die dieses FTP-Konto sammeln kann. Wenn Sie eine große Website betrieben haben und nur einem bestimmten Benutzer Zugriff auf einen kleinen Teil Ihrer Website geben wollten . würden Sie vielleicht ein anderes Verzeichnis für sie erstellen, aber wir möchten die gesamte Website bearbeiten, also werden wir das loswerden. Wir brauchen nicht wirklich einen Programmierer, weil wir ihn verwenden, also erstellen wir das FTP-Konto. Jetzt können wir es hier sehen. Nun, das andere, was Sie brauchen, um FTP lokal zu verwenden, auf Ihrem eigenen Computer ist ein FTP-Client und der FTP-Client, den ich benutze, heißt Cyberduck, es gibt auch einen namens FileZilla. Aber im Grunde ist es ein kleines Programm, mit dem Sie sich über FTP verbinden können. Sie ermöglichen es Ihnen, auch andere Server zu verbinden. Ich habe bereits Cyberduck installiert, alles, was Sie tun müssen, ist es einfach herunterladen und installieren, es gibt nicht viel Konfiguration, die in dieser Hinsicht passieren muss. Was ich an cpanel mag, ist, dass ich einfach darauf klicken kann und Sie die Konfigurationsdateien herunterladen können. Wenn Sie Ihr Leben in Ihrem Windows erleichtern möchten, verwenden Sie FileZilla oder CoreFTP und wenn Sie auf Mac sind, können Sie Cyberduck wie ich verwenden und Sie können die Konfigurationsdatei herunterladen , die alle Informationen für Sie gespeichert haben schon. Wenn Sie es manuell tun möchten, sind dies die Felder, die Sie in Ihren Client einfügen müssen. Was ich tun werde, ist die FTP-Konfigurationsdatei für Cyberduck herunterzuladen. Nur in Downloads speichern. Alles, was ich jetzt tun muss, ist einfach darauf zu klicken und plötzlich öffnet sich Cyberduck und es öffnet sich, oder es wird beginnen, eine Verbindung zu unserer Website zu öffnen. Es ist hier, der Benutzername vorausgefüllt und wir können darauf zugreifen. Wir müssen nur noch einmal unser Passwort eingeben, da es das Passwort aus Sicherheitsgründen nicht speichert , so dass wir dieses Passwort dort einfügen können, klicken Sie auf Anmelden. Es wird sagen, ungesicherte Verbindung in den meisten Fällen, klicken Sie einfach auf Weiter. Sobald Sie eingeloggt sind, können Sie Ihre gesamte Website sehen. Dann können Sie in öffentliche HTML klicken und es gibt Ihren Index php. Das coole an der Verwendung von FTP ist, dass ich mit der rechten Maustaste darauf klicken kann. Ich möchte nicht auf Bearbeiten mit Textbearbeitung klicken, damit ich meine Einstellungen ändern und zum Editor gehen und sagen, ich möchte mit Atom bearbeiten und immer diese Anwendung verwenden. Ich denke, du musst vielleicht etwas auffrischen. Jetzt kann ich auf den Editier-Button klicken und plötzlich haben wir es in unserem Code-Editor. Nun, etwas, das Sie beachten müssen, ist der Unterschied zwischen Ihrem Index php auf Ihrem entfernten Webserver und dem Index PHP, den Sie lokal haben. Wenn Sie sie zur gleichen Zeit offen haben, werde ich nur erweitern, Atom wird Sie wissen lassen, was ist was. Der in den privaten var-Ordnern ist derjenige, den Sie vorübergehend bearbeiten, um dann erneut auf Ihre Website hochzuladen, und dieser ist in Ihrem Skillshare Kurs Projektverzeichnis oder was auch immer es heißt, meins wird nur Skillshare Kurs genannt. Wir können Sachen wie hier reingehen und ich gehe hier rüber, wo wir unsere Website live sehen, sie zur Seite stellen und ein paar Dinge ändern können. Sagen wir „Hallo und willkommen auf dieser Website “, und dann drücken wir Speichern. Was passieren wird, ist, dass es mit Cyberduck hochgeladen wird. Es sagt Hochladen abgeschlossen, sobald es den Upload abgeschlossen sagt, sollten wir in der Lage sein, die Seite zu aktualisieren und es steht „Hallo und willkommen auf dieser Website.“ Jetzt sind wir in der Lage, unsere Live-Website mit einem System zu bearbeiten , das uns viel vertrauter ist, wenn wir das, was lokal genannt wird, auf unserem eigenen Computer entwickeln , wir können unseren eigenen Code-Editor verwenden, wir können zu verschiedene Dateien. Sagen Sie zum Beispiel, wenn ich auch eine andere Datei bearbeiten wollte, sagen wir zum Beispiel, ich wollte die Stile gleichzeitig öffnen, ich kann diese auch bearbeiten und so kann ich zwischen index.php und styles.css auf dem Remote-Server zurückspringen und Klicken Sie auf Speichern. Sobald es hochgeladen wird, sind diese Änderungen live auf unserer Website, so dass der Vorteil der Verwendung von FTP ist. Es gibt andere Vorteile, aber für mich als Entwickler verwende ich FTP meistens auf diese Weise, da ich eine Website auf einem Remote-Server bearbeiten kann , der manchmal nicht einmal eine Live-Website ist, könnte auf einer sogenannten Staging sein -Server. Ein Staging-Server ist eine Live-Website, aber es ist nicht an der Adresse der endgültigen Website. Das ist ein wenig über FTP, Cyberduck ist ein cooles kleines leichtes Programm für den Einsatz auf dem Mac, für euch unter Windows, vielleicht mögen Sie FileZilla. Aber jetzt, da wir FTP behandelt haben, wissen wir jetzt, wie man eine Website erstellt, sie ins Internet stellt und sie nun mit FTP bearbeitet, und das ist im Wesentlichen der Hauptteil des Kurses. Ich habe noch ein paar weitere Videos, um uns einzupacken. Ja, hoffentlich können Sie jetzt beginnen zu verstehen, wie Web-Entwicklung funktioniert und die verschiedenen Teile, die alle zusammenkommen, um Ihnen eine Website im Internet zu bekommen. Wenn Sie irgendwelche Fragen haben, lassen Sie sie natürlich in der Frage Abschnitt, und ich werde Sie im nächsten Video sehen. 19. Bonus: Wordpress: In Ordnung. In diesem Video möchte ich mit Ihnen ein wenig Bonus teilen und dieser Bonus ist WordPress. In diesem Kurs haben wir im Grunde alles von Grund auf neu gebaut. Ja, wir haben einige Frameworks im Fall von jQuery und Bootstrap verwendet und wir haben ein bisschen eine Vorlage verwendet, um auf unserer Homepage zu beginnen, aber Sie werden feststellen, dass all das PHP, das wir selbst tun mussten , und wenn Sie eine vollständige anpassbare Web-App, müssten Sie sich selbst programmieren und Bibliotheken verwenden und vielleicht eines jener Back-End-Frameworks entwickeln , die wir in der Lektion über Frameworks behandelt haben, aber für viele Leute müssen wir das Rad nicht neu erfinden, wir brauchen nur eine einfache Content-Website und eine der besten Plattformen zu entwickeln, das ist ein System namens WordPress. Nun, wenn wir gehen in, geben Sie WordPress in Google, was ich nicht spreche, ist wordpress.com, die eine Website, die es Ihnen ermöglicht, eine WordPress-Website auf ihrem eigenen Hosting zu erstellen und sie kontrollieren alles, aber Worüber wir reden, ist die Open-Source-Software. WordPress ist ein Bündel von Code, den Sie einfach herunterladen und vollständig bearbeiten oder verwenden können , wie es Ihnen direkt aus der Box gegeben wird. Nur um zu zeigen, dass, wenn wir WordPress herunterladen, es ist nur etwa eine neun Megabyte-Datei, so kann ich in Downloads gehen, Ich werde WordPress entpacken und dann ist dies im Wesentlichen das Back-End einer WordPress-Website. Also haben Sie eine ganze Reihe von PHP-Dateien hier drin, Sie haben Plugins und Themes und verschiedene Dinge, die wir in nur einer Sekunde bekommen werden, aber ich wollte nur den Punkt machen, dass Sie eine Reihe von PHP-Dateien bekommen, wenn Sie WordPress herunterladen, aber zusammen erstellen sie eine Website direkt aus der Box. Um dies zu demonstrieren, was ich tun werde, ist, dass ich hier zurück zu unserem Projekt gehen werde und ich war nie zu sehr an diese Website gebunden. Was ich tun werde, ist einfach zu löschen, was wir hier haben, wenn Sie viel Mühe in Ihre Website gelegt haben, vielleicht möchten Sie das nicht löschen und vielleicht sollten Sie das auf einer anderen Website tun , aber ich bin nicht allzu daran gebunden, also werde ich den exakt gleichen Host verwenden, um dies in der exakt gleichen Domäne zu tun. Also werde ich zu cPanel gehen und was großartig an cPanel ist, dass Sie ein paar Anwendungen installieren können, im Grunde, sie nennen es eine Ein-Klick-Installation, aber es gibt nur ein paar Klicks zu tun. Installation von WordPress auf Ihrem eigenen Computer dauert ein wenig Zeit, müssen Sie Datenbanken einrichten, wie wir getan haben, aber mit cPanel, können wir einfach eine WordPress-Website ziemlich einfach zu bekommen. Also haben wir WordPress hier, wir können auf „Anwendung installieren“ klicken und es wird uns ein paar Fragen stellen. Wir wollen es direkt auf unserer Domain installieren, weil ich gerade die Dateien gelöscht habe, ich habe nichts dagegen, dass dies jetzt meine WordPress-Website wird. Sie können mit den Standardeinstellungen bleiben, was ich tun werde, ist, dass ich meinen Administrator-Benutzernamen nur auf Admin ändern und ich werde ein anderes Passwort eingeben. Ich weiß, dass wir viele Passwörter in diesem Kurs erstellt haben, aber wir sollten wirklich ein separates Passwort für WordPress als auch erstellen und so was ich tun werde, ist wie immer, ich gehe zu meinem ein Passwort und generiere einfach ein neues Passwort und Stellen Sie sicher, dass Sie das irgendwo speichern. Ich habe hier FTP-Passwort, WordPress, Passwort. Ok. Das hier ist leer. Ihre Administrator-E-Mail ist die E-Mail, an die sie Informationen senden wird , basierend auf dem, was los ist, auf WordPress. Ich werde das in chris@christhefreelancer.com ändern und Sie können Ihre Website benennen, was auch immer. Ich werde es nur als mein Blog verlassen, nur eine andere WordPress-Website und Sie können alles andere gleich lassen und klicken Sie auf „Installieren“. Hier sehen Sie, wie schnell Sie eine WordPress-Installations-App erhalten können. Ich werde diese schließen und hoffentlich kann ich Ihnen das in Echtzeit zeigen. So sehr schnell, hoffentlich bleibt es nicht auf 99 hängen und die Installation ist abgeschlossen, wie schnell war das? Jetzt, wenn wir zu unserer Domain gehen, haben wir eine WordPress-Website. Es sieht jetzt nicht nach viel aus, aber es gibt ein paar Dinge, die hier vor sich gehen und was wir tun können, ist, dass wir auf den Admin zugreifen können. Das Wichtigste ist, dass viele Leute verwirrt werden, ich habe bereits meine Login-Daten für cPanel, warum muss ich mich in WordPress einloggen und in ein anderes Dashboard gehen. Nun, cPanel ist eine Ebene tiefer, es ist nur ein Ort, um Ihre Website zu verwalten und Sie können tatsächlich auf den Code zugreifen Wenn wir also zu unserem Dateimanager zurückgehen, können wir jetzt sehen, dass in öffentlichem HTML, diese Struktur, die wir gesehen haben bevor wir WordPress heruntergeladen haben, ist jetzt auf hier. Wie ich bereits sagte, WordPress ist nur eine Reihe von Code-Dateien, die zusammen machen Sie eine Website. In cPanel, dies ist, wo Sie alle Dinge tun würden, die wir bereits getan haben, wie Zugriff auf Ihre Dateien, würden Sie Ihre Datenbank manuell betrachten, tun alle diese E-Mail-Adressen, Subdomains, all das, was Sie tun würden von Ihrem cPanel , aber in Bezug auf Ihre neue WordPress-Website, ist dies das Back-End. Dies ist Ihr Dashboard und Sie benötigen dafür einen anderen Login. Wie WordPress funktioniert und die Magie davon tatsächlich als Blogging-Plattform gestartet wird, kann ich Beiträge erstellen. Ich kann hier klicken und anstelle von Hallo Welt, Ich werde einfach Hallo Welt dort für eine Sekunde und ich werde sagen, Blogpost Nummer zwei und dann können wir einfach in Blog-Inhalt eingeben und wir können es auch eine Kategorie geben. Sagen wir einfach, es ist Reiseartikel, ich liebe Reisen. Ich weiß, dass dies nicht mit Reisen verbunden ist, aber nur als Beispiel können wir auf „Veröffentlichen“ klicken und dann können wir es sehen. Jetzt haben wir einen Blog-Post mit Blog-Inhalt und dann überall, wo verweist auf alle Blog-Posts, werden wir sehen. Wenn wir also auf unsere Website gehen, wird es uns standardmäßig alle unsere Blogbeiträge zeigen. Jetzt können Sie Hello World sehen und Sie können auch Blog-Beiträge sehen. Jetzt sind wir derzeit eingeloggt, also haben wir diese Leiste als Admin, aber wenn wir sie in einem Inkognito-Fenster öffnen, damit wir sie sehen können, wie der Benutzer es sehen würde, sehen sie es genau dasselbe, außer ohne diese Leiste und sie sind auch nicht in der Lage, Dinge auf hier zu bearbeiten. Wenn Sie von vorher bemerken, gibt es ein paar zusätzliche Dinge, die wie Bearbeiten auftauchen, der Benutzer das nicht am Ende haben. Es ist völlig sicher, es sei denn, Sie geben ihnen einen Login und sie können dieses Zeug tatsächlich ändern. Das erste, was mit einer WordPress-Website, die Sie anpassen möchten, ist ein Thema und was Sie hier sehen, wenn Sie auf die eigentliche Website gehen ist ein grundlegendes Thema von WordPress selbst genannt 2017. Jedes Jahr kreieren sie eine neue basierend auf dem Jahr und so sah 2015 aus, so sieht 2016 aus. Ich nehme an, das neue wird bald herauskommen und dann wird es im Jahr danach noch einen geben. Aber ich mag ein Thema namens Divi zu verwenden und Sie können Divi finden, geben Sie einfach in Divi Thema, es wird von eleganten Themen zur Verfügung gestellt. Sie müssen auf jeden Fall nicht diese zu verwenden, aber es zahlt sich aus, um in einem schönen WordPress-Theme zu investieren, das einen Page Builder hat. Denn im Wesentlichen, wenn wir wollten, habe ich zu viele Dinge gleichzeitig. Wenn wir eine Seite in diesem aktuellen Thema anpassen und erstellen wollten, können wir zu gehen „Neue Seite hinzufügen“ und wir erhalten im Grunde die gleiche Schnittstelle wie unsere Beiträge und wir können Bilder hinzufügen. Legen wir einfach ein Bild von meinem Gesicht da rein, es ist nicht, weil ich mich selbst liebe, es ist nur, weil es zuerst kam und vielleicht geht es nicht um Seite für mich, also kann ich das nach links ausrichten und dann einfügen: „ Hi, ich bin Chris“ und ich klicke dort auf den Link, also versucht das, irgendwo zu verlinken, aber ich kann das einfach bearbeiten und Sie können sehen, dass wir noch nicht in Code graben mussten, es ist alles nur mit diesem Editor. Ich kann das immer noch nicht loswerden. Im Wesentlichen, um dies loszuwerden, können wir tatsächlich in den HTML graben und das geschieht, indem Sie auf diese Textregisterkarte klicken. Ich kann hier jetzt sehen, dass wir ein Link-Tag haben, so dass Sie das auf beiden Seiten loswerden können und das erlaubt uns, wieder in hier zu klicken und die visuelle Darstellung zu sehen. Aber wenn Sie ein Design verwenden, das keinen Seitengenerator hat, ist dies alles, was Sie erhalten. Sie können ausrichten, Sie können ein Zitat setzen, Sie können in Links, verschiedene Überschriften setzen. Also werde ich in die Überschrift eins setzen. Dann können wir das als Seite veröffentlichen oder vielleicht nicht. Ich sollte es wahrscheinlich zuerst einen Titel geben, Über. Dann können wir unsere About Seite haben. Das wird nach unserem Thema auftauchen. Aber der Vorteil, etwas wie Divi zu verwenden, ist, dass Sie einen Page Builder erhalten. Da Divi ein Premium-Thema ist, können Sie es hier nicht suchen, Sie müssen es hochladen, sobald Sie es heruntergeladen haben. Auch hier machen wir keinen vollständigen Kurs auf Divi oder WordPress Entwicklung. Ich wollte Ihnen nur eine kleine Demonstration darüber geben, wie Sie eine Website mit minimalem Code erstellen und sie auch vollständig anpassbar haben können. Das ist gerade jetzt hochgeladen, es ist ein ziemlich großes Thema, wir werden es einfach vorwärts und ich werde Sie in nur einer Sekunde sehen. Divi hat jetzt auf unsere WordPress-Seite hochgeladen. Sie werden es jetzt nur für uns installieren. Wie Sie hier sehen können, heißt es, Theme erfolgreich installiert. Der letzte Schritt, wird sein, es zu aktivieren, wenn wir zuversichtlich sind, dass wir definitiv zu diesem Thema ändern wollen. Wir haben noch nichts auf unserer Website, also ist das kein Problem. Sie können sehen, dass es bereits ein paar Sachen zu unserer Liste hinzugefügt hat. Es gibt einen anderen Post-Typ in Divi namens Projects und das ist gut für Portfolios. Wenn Sie ein Premium-Thema wie Divi verwenden, gibt es Ihnen oft ein anderes Menü und gibt Ihnen Themenoptionen, so dass Sie Features direkt im Thema bearbeiten können. Wenn wir zurück zu unserer Website gehen, können wir hier gehen und klicken Sie auf Website besuchen. Plötzlich sieht unsere Website ganz anders aus. Wir haben noch die beiden Blog-Posts, aber wir haben eine ganz neue Struktur, ich denke, eine neue Haut, können Sie sagen, und das ist wirklich das neue Thema, Divi. Aber die mächtige Sache über Divi und ein paar andere Premium-Themen als auch, ist, dass Sie eine neue Seite erstellen und Sie können sie mit ihrem Page Builder strukturieren. Jetzt, wo wir Divi haben, können Sie sehen, wie diese extra lila Dinger kommen. Wir haben die Einstellungen hier drüben, und dann haben wir einen Knopf, um den Divi-Builder zu benutzen. Was ich tun werde, ist, ich werde diese Seite Divi Seite nennen und ich werde auf Divi Builder verwenden klicken. Sie können den Visual Builder tatsächlich verwenden. Das zeig ich dir. Dies ist ein spezielles visuelles What You Seed Is What You Get Builder in Divi, und dann können Sie tatsächlich mit der Seite direkt vor Ihnen interagieren. Es ist großartig für Designer, die ihre Veränderungen sofort erleben möchten. Hier kann ich einfach einen Text schreiben, hallo, hallo, und das kannst du sofort sehen. Dann können wir andere Designaspekte wie Ausrichtung, Dimensionierung ändern, es gibt viele Optionen hier und es wird eine Weile dauern, um sich vertraut zu machen, und es wird davon abhängen, welches Thema Sie verwenden, ich benutze nur Divi. Wenn wir auf Speichern klicken, werde ich Ihnen zeigen, Ich werde eher veröffentlichen, weil es eine neue Seite ist. Jetzt, das gespeichert und veröffentlicht wurde, werde ich Visual Builder beenden und Ihnen die andere Art und Weise zeigen, wie wir bearbeiten können. Wir haben Divi und das ist durch diesen Divi Builder und wir können Abschnitte bauen. Wo ist unser Streit hier? Wir haben unsere Reihe im Modul. Wir können eine weitere Zeile hinzufügen und wir können sie einrichten, wie wir wollen, wie vier Spalten mit gleicher Größe, oder wir können es so haben, mit einer Größe von zwei Dritteln und einer ist ein Drittel Größe, wir können es in zwei teilen. Lass uns das einfach machen. Dann haben wir diese Leerzeichen zu klicken und ein Modul zu setzen. Sie können die verschiedenen in Divi nachschlagen, wenn Sie interessiert sind, aber wir könnten wie ein Bild, zum Beispiel, und dann könnten wir in das Bild, das wir vorher hatten, einfügen, drücken Sie Speichern. Wenn Sie die Änderungen nicht wirklich veröffentlichen möchten, sagen Sie, wenn Sie dies auf einer Live-Website verwenden, können Sie einfach eine Vorschau anzeigen, um zu sehen, wie es aussehen würde, bevor Sie speichern. Ich habe keine Einschränkungen für das eigentliche Bild gesetzt, also kommt es als die volle Breite auf . Aber wenn wir die Breite auf 12 Prozent ändern wollten, könnten wir sie auffrischen. Dann könnten wir es im anderen Teil nach unten verschieben, diese Zeile löschen, in ein Textfeld einfügen. Ich spiele nur um ehrlich zu sein, ich zeige dir nur, was wir in Divi machen können. Ich werde Testtext setzen, speichern, aktualisieren, Seite anzeigen. Sie können sehen, wir haben eine Spalte hier und eine Spalte dort. Nun, offensichtlich, es ist nicht die schönste Website. Es gibt noch Arbeit, die getan werden muss. Aber ich wollte Ihnen zeigen, Jungs WordPress und wie wir eine Menge der schweren Heben direkt aus der Box mit WordPress, es ist eine sehr leistungsfähige Open-Source-Software. Der Grund, warum es Open Source genannt wird, ist, dass wir den Code direkt bearbeiten können. In der Tat können wir direkt in Aussehen, Editor gehen , und es sagt, sehr vorsichtig sein, Back-End-Code zu bearbeiten. Ich sage ja, und wir können jede der Theme-Dateien eines unserer Themes bearbeiten. Innerhalb von WordPress können wir alles in diesem speziellen Foto bearbeiten. Dies ist nur ein Beispiel, aber auf dieser Website würden wir einen anderen Ordner für Divi sehen, und wir könnten alle diese Dateien bearbeiten. Wenn wir dann einen Schritt tiefer gehen, wie wir es mit unserem Dateimanager getan haben, können wir direkt in unsere Dateistruktur gehen und diese bearbeiten. Nun, Sie würden nicht wollen, um eine von diesen zu bearbeiten, weil diese sind diejenigen, die WordPress Arbeit zu machen. Aber wieder, nur um zu zeigen, dass dies Open Source ist, ist dies nur eine Reihe von Dateien, die Sie bearbeiten können, aber es ist wahnsinnig mächtig und Sie können so viel wie Sie mit WordPress anpassen, wie Sie wollen. Es bietet die gute Balance, wenn Sie eine Menge der schweren Heben machen, einige der Dinge vorbereiten, die Sie nicht von Grund auf neu programmieren möchten, und dann können Sie es noch vollständig bearbeiten und die Website so viel anpassen, wie Sie brauchen. Ich möchte nur Sie mit WordPress verlassen, weil für viele meiner Client-Websites, die zu mir kommen und sie sagen nur, Ich will eine Website, Ich empfehle ihnen WordPress, und Divi ist das Thema, das ich vor kurzem verwendet habe, aber es gibt andere Themen, die ich auch empfehlen würde. Eine, die ich für ein Client-Projekt verwendet habe, war Fortuna, die mit einem eigenen Page Builder kommt. Ich würde völlig Ihre eigenen Recherchen machen, um ein Thema mit einem guten Page Builder zu finden, und Sie können Websites auf und laufen so. Zum Beispiel, meine eigene Website, Chris der Entwickler, Ich habe sehr schnell mit WordPress und Divi gebaut. Es ist ganz einfach. Mit WordPress können Sie Ihre Menüs einstellen, Sie können alles dynamisch einstellen, Sie können Seiten erstellen, wie wir es getan haben, Sie können Blog-Posts sehen, und Sie können Ihre Fotos und Logos und verschiedene Dinge hochladen. Ich hoffe, das war eine gute kleine Einführung in WordPress. Wenn Sie nicht alles von Grund auf neu erstellen möchten und Sie brauchen nur eine grundlegende Content-Website und nicht einmal eine grundlegende Content-Website, sondern einen Blog oder etwas, das nicht tut, wie eine ganze eigenständige App, die etwas Besonderes tun muss. WordPress ist oft eine gute Wahl. Wenn Sie eine E-Commerce-Website machen, gibt es auch ein paar verschiedene Plattformen, aber ich mache hauptsächlich Content-Websites und WordPress ist ein sehr beliebtes, was man Content Management System, aka CMS nennt , für Inhalte -Websites. Ich hoffe, das war eine gute Einführung in WordPress. In den nächsten Videos werden wir einschließen und Ihnen den Einstieg in Ihr eigenes Klassenprojekt bringen . Wir sehen uns im nächsten Video. 20. Schlußbemerkung und Kursprojekt: Es ist an der Zeit, diesen Kurs abzuschließen und Ihnen den Einstieg in Ihr Klassenprojekt zu erleichtern. Inzwischen sollten Sie den Unterschied zwischen dem Frontend und dem Backend, den Zweck von HTML, CSS und JavaScript verstehen , was ein Framework ist und warum Sie einen verwenden sollten, den Zweck von PHP und MySQL, den Unterschied zwischen einem Domain-Namen und Hosting und wie Sie Ihre Website im Internet veröffentlichen. In unserem Klassenprojekt ist es an der Zeit, all dieses neue Wissen zusammen zu bringen, um Ihre erste Website im Internet oder zweite oder dritte zu veröffentlichen , vielleicht haben Sie dies vorher getan. Egal, ich werde Ihnen ein paar Optionen geben. Nummer 1, können Sie Ihre Website von Grund auf neu bauen, wie wir es in der Mehrheit dieser Klasse oder zwei getan haben, wie wir es am Ende getan haben, beginnen Sie mit dem Hosting angemeldet und beginnen Sie mit dem Aufbau Ihrer Website auf WordPress. Es liegt an Ihnen oder so, wie Sie es tun wollen. Denken Sie daran, dass jedes Mal, wenn Sie nicht wissen, wie Sie etwas tun sollen, einfach anfangen zu googeln. Ich meine es ernst hier und ich übertreibe nicht, wenn ich sage, dass ständige Forschung etwas ist, das Sie während Ihrer Karriere als Entwickler tun müssen. Selbst wenn Sie nur gekommen sind, um mehr über das Web zu erfahren, ist das Lernen, wie man wie ein Webentwickler forscht , eine Fähigkeit, von der wir alle definitiv profitieren können. Entwickler sind schließlich nur Problemlöser und das Internet selbst ist eine riesige Ressource, um alles zu lernen, genau wie wir es in diesem Kurs getan haben. Wenn Sie zusätzliche Hilfe benötigen, hinterlassen Sie mir einfach einen Kommentar in der Diskussionsbox und lassen Sie mich auch wissen, wenn Sie möchten, dass ich eine andere Klasse für Sie erstelle, gehen Sie näher über alles, worüber wir in der heutigen Klasse gesprochen haben. Damit ist der Kurs abgeschlossen. Ich danke euch Jungs so sehr für das Anschauen und ich freue mich auf eure Klassenprojekte. Viel Glück, und ich sehe euch im Diskussionsbereich.