• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

Tutorial PHP + Html Skola för Nybörjare

Evil Mark

Evil Mark

Active Member
Joined
Nov 23, 2008
Messages
1,707
Reaction score
32
Hej N3wBZ! :w00t:

Så nu kör vi igång..

Grunderna i HTML - Taggar
Detta är en liten lathund med många av de html-taggar och attribut vi kommer att arbeta mest med. Den är inte komplett och jag råder er att söka information på egen hand. webdesignskolan.se är en mycket bra resurs att använda sig av, likaså W3Schools Online Web Tutorials. Annars använder ni er favoritsökmotor och söker på t.ex ”html” ”tag” ”attribute” eller byt ut ”tag” mot just den taggen ni letar efter.
Obligatoriska taggar
<html></html>
All HTML-kod skall vara inför dessa taggar. Indikerar början och slutet på webbsidan.

<head></head>
Metainformation skrives innanför dessa taggar. T.ex title-taggen.

<title></title>
Titeln på sidan. Syns längst upp i vänster hörn på webbläsaren samt blir namnet på bokmärket. Innanför head-taggen. Ej obligatorisk men ni ska använda den.

<body></body>
Allt innanför dessa taggar utgör själva webbsidan.

Textformattering

<h1></h1>
<h2></h2> etc
Heading, dvs olika rubriker. H1 är störst (jämför Rubrik, Heading i Word) och sedan fallande.

<p></p>
Paragraph (stycke). Ger även extra radavstånd till nästa stycke eller tagg.

<strong></strong>
Bold (fet stil). Gör texten fet.

<i></i>
Italic (kursiv). Gör texten kursiv.

<u></u>
Underline (understruket). Gör texten understruken.

<br />
Break(radbrytning). Gör en radbrytning.

Listor
<dl></dl>
Definitionslista. Bra om man har ett antal ord som behöver förklaras. Format:
<dl>
<dt>Ord(Rubrik)</dt>
<dd>Förklaring</dd>
<dt>Ord(Rubrik)</dt>
<dd>Förklaring</dd>
</dl>

<ul></ul>
Unordered list(onumrerad lista). Ger en punktlista.

Attribut:
type=”square, circle eller disc” -- Utseendet på punkterna i listan.
<ul type=”square”>
<li>Listelement</li>
<li>Listelement</li>
</ul>

<ol></ol>
Ordered list(numrerad lista). Ger en numrerad lista. Formatet är samma som med <ul> men byt ut ul mot ol. Attribut:
start=”en siffra” -- Siffran du vill att listan ska börja med

Bilder
<img>
Image(bild). Tänk på lagringsstorleken på bilden. Spara i ett optimalt format. Attribut:
src=”adressen till bilden” – Kan vara en webbadress men oftast själva sökvägen till bilden. Ligger bilden i samma mapp som html-filen anges endast filnamnet.
title=”text” – Text som visas när muspekaren hålls över bilden. Ska användas!
width=””, height=”” – Bredden respektive höjden i pixlar som bildas ska visas i.
vspace=”” – ”Luft” ovanför och nedanför bilden och andra element. Anges i pixlar.
hspace=”” – ”Luft” till vänster och höger om bilden och andra element. Anges i pixlar.
align=”left, right etc” – Justera bilden i förhållande till övriga element (tex text).

Länkar
<a></a>
Man kan länka till allting som finns på nätet, oftast används det för att länka till en annan sida.
Innanför taggarna har man den text eller bild som ska klickas på för att följa länken. Attribut:

(har lagt en punkt i början det ska egentligen vara href=)
h.ref=”http://www.sidan.com” -- länkar till ”www.sidan.com”. Glöm ej http://! elr
h.ref=”annanSida.htm” – länkar till annanSida.htm som finns i samma mapp.

Elr:

href=”#namn på ankare” – länkar till ett ”ankare” med namnet ”namn på ankare”.
Måste användas tillsammans med en <a name=”namn på ankare”>Text</a> elr
href=”mailto:[email protected]” -- E-postlänk
title=”text” – Text som visas när muspekaren hålls över länken. Ska användas!
target=”_blank, _top, _self etc” – Här anger du målet med länken. Kan vara namnet på en frame om man använder ett frameset. _blank gör att länken öppnas i ett nytt fönster.

Tabeller
<table></table>
Table(tabell). Definierar var tabellen startar och slutar. Attribut:
width, height=”antal pixlar” – Anger bredd/höjd på hela tabellen. Kan även ange 100%.
border=”0,1,2 etc” – Anger tjockleken på kantlinjen. 0 innebär att ingen kantlinje används.
cellspacing=”antal pixlar” – anger avståndet mellan cellerna.
cellpadding=”antal pixlar” – anger avstånd till innehållet i cellerna.
bgcolor=”färg” – bakgrundsfärg i tabellen
background=”enbild.gif” – anger bakgrundsbild i tabellen
align=”left, right eller center” – Justerar tabellen i förhållande till sidan (eller det element tabellen befinner sig i. Default är ”left” (dvs om du vill ha align=”left” behöver du inte sätta ngn align.

<tr></tr>
Tablerow(rad). Varje tr-tagg symboliserar en ny rad i tabellen. Attribut:
valign=”top, bottom eller center” – Justerar innehållet i alla celler vertikalt på denna rad. Standard är ”center” (dvs om du vill ha valign=”center” behöver du inte sätta ngn valign.
align=”left, right eller center” – Justerar innehållet i alla celler horisontellt på denna rad. Default är ”left” (dvs om du vill ha align=”left” behöver du inte sätta ngn align.
height=”antal pixlar” – höjden på just denna rad.
bgcolor=”färg” – bakgrundsfärg i raden

<td></td>
Tabledata(cell). Varje td-tagg symboliserar en ny kolumn i raden. Obs! Alla rader efter den första kommer att ha lika många kolumner som den första raden. Attribut:
valign=”top, bottom eller center” – Justerar innehållet vertikalt i denna cell. Om du angett en valign för raden ”overridar” denna valign det värdet.
align=”left, right eller center” – Justerar innehållet horisontellt i denna cell. Om du angett en align för raden ”overridar” denna align det värdet.
bgcolor=”färg” – bakgrundsfärg i cellen
colspan=”siffra” – Hur många kolumner en cell ska uppta.
rowspan=”siffra” – Hur många rader en cell ska uppta

Syntax:
<table attribut=”värde”>
<tr attribut=”värde”>
<td attribut=”värde”>Här är innehållet i cellen: Rad 1 Kolumn 1</td>
<td attribut=”värde”> Här är innehållet i cellen: Rad 1 Kolumn 2</td>
</tr>
<tr>
<td>Här är innehållet i cellen: Rad 2 Kolumn 1</td>
<td>Här är innehållet i cellen: Rad 2 Kolumn 2</td>
</tr>
</table>

PHP Börjar nedanför denna post
 
Last edited:
Databashantering – en liten php-skola för att kommunicera med databaser

1. Skapa ett formulär med de element du behöver, skicka till en sida (alternativt samma)
2. Ta emot informationen
3. Kontrollera att all info finns med i ett korrekt format (tex användarnamn vid en reg.)
4. Koppla upp mot databasen
5. Ställ query mot databasen
6. Visa resultat/ge återkoppling
 
Last edited:
1.

Del 1 - formulärtaggen
<form action=”script.php” method=”post”>

  • <form> - taggen inleder själva formuläret, utan denna har vi inget formulär. Detta är alltså HTML. Glöm inte bort att avsluta hela formuläret med </form>
    -
  • action=”script.php” – i attributet action anger vi vilken sida som vi vill att formuläret skall skicka informationen till.
    -
  • method=”post” – i attributet method anger vi hur vi vill att formuläret skall skicka informationen, sätter vi ”post” här så skickas informationen dold vilket passar bra vid stora mängder information eller känslig information. Anger vi värdet ”get” skickas informationen synligt i adressfältet vilket passar om jag vill kunna bokmärka t.ex. en sökning.
 
Last edited:
2.

Del 2 – formulärelementen
<input type=”text” name=”fnamn” />

  • <input /> - taggen anger att det skall komma ett formulär element här som användaren kan kommunicera med. Observera att vi kan lägga till hur många formulärelement som helst i formuläret (inte alla heter <input>).
    -
  • type=”text” [/COLOR]– i attributet type anger vi vad för typ av formulär element vi vill ha. ”text” innebär att vi får en vanlig textruta, andra tillgängliga alternativ är checkboxar(checkbox), radiobuttons(radio), lösenordsrutor(password) och submitknapp.
    -
  • name=”fnamn” – i attributet name anger vi ett namn för att kunna identifiera just den här textrutan när vi sedan skall hämta informationen på den sidan vi skickar formuläret till.
 
Last edited:
3.

Del 3 – Submitknapp
<input type=”submit” name=”submit” value=”Skicka” />

  • En submit knapp krävs för att skicka informationen I formuläret, value-attributet anger vad som skall stå på knappen.



Bild 1: Ett formulär i HTML

2. Ta emot info
Enligt det förra exemplet skulle vi skicka informationen i formuläret till en sida som heter script.php så detta är det som hamnar i den. I exemplet ovan så har vi endast en textruta, skulle det finnas fler element i formuläret skulle vi göra samma sak för samtliga, det vi ändrar är variabelnamnen samt indexen i arrayen $_POST (se förklaring nedan).


Bild 2: Ta emot informationen från formuläret och spara i variabel.

  • <?php och ?> - anger att jag nu skriver php-kod, php-tolkaren på servern kommer nu att genomföra allt det som står innanför dessa innan den skickar dokumentet till din webbläsare.
    -
  • $fornamn = – vi skapar en variabel för att spara ner informationen för senare användning här på sidan. Tänk på att namnge dina variabler på ett relevant sätt. Vi tilldelar den värdet av:
    -
  • $_POST["fnamn"] - $_POST är en array(vektor) som innehåller alla de värden som finns i formuläret. Den heter $_POST därför att vi använde metoden ”post” i formuläret (se Bild 1: rad 9), hade vi använt metoden ”get” hade arrayen hetat $_GET istället.
    -
  • En array är som en variabel som kan innehålla flera olika värden, därför måste vi ange vilken del i arrayen vi vill komma åt just nu (vilket index). Det är därför vi anger ”fnamn” som index till denna, jämför med name attributet i <input>-taggen i formuläret (Bild 1: Rad 10).

- Kontrollera att all info finns med i ett korrekt format
Detta kommer senare. Det tar vi när vi har mer på fötterna.
 
Last edited:
4.

Del 4 - Koppla upp mot databasen
Lätt som en plätt, anropa bara funktionerna mysql_connect() och mysql_select_db() med rätt värden inskickade till dem. (Detta är typ om du vill ha en hemsida med ett forum endast)


Bild 3: Koppla upp mot databasen.


Använder ni koden nedanför är den menad för större saker än bara en tom hemsida med endast egenskapen av att logga in. För att om ni använder denna koden slipper ni lägga ut samma kod överallt 10 gånger, för att koden nedar gör det automatiskt

$MYSQL_SERVER='127.0.0.1';
$MYSQL_PASSWORD='pass';
$MYSQL_ACCOUNT='acc';
 
Last edited:
5.

Del 5 - Ställ query mot databasen
Beroende på vad vi ställer för typ av query till databasen så kan vi behöva spara ner resultatet i en variabel som vi sedan kan stega igenom för att presentera resultatet rad för rad.


Bild 4: Ställ query mot databasen

Observera att alla querys inte behöver sparas ner i ett resultat, t.ex. vid en ”INSERT INTO” så förväntar vi inte oss något tillbaka från databasen och det räcker då egentligen med att bara skriva mysql_query($sql);
Att tänka på:

  • Ofta använder man sig av informationen från ett formulär i sina querys, det är en av anledningarna till att vi först spara ner den i mer lätthanterliga variabler (se Punkt 2)
    -
  • Anledningen till att vi först sparar queryn i en variabel ($sql) är att vi mycket enkelt kan skriva ut queryn med alla variabelvärden ifall vi vill kontrollera vad det är vi skickar in till databasen.
    -
  • Att lägga till ”or die(mysql_error())” innan semikolonet (Bild 4: Rad 14) kan vara hjälpligt i utvecklingsfasen men får aldrig finnas med i en skarp online-version.
 
Last edited:
6.

Del 6 - Visa resultatet/ge återkoppling
Vid en INSERT, UPDATE eller DELETE så bör man som användare få någon form av bekräftelse på att det hänt något i databasen. Har vi däremot gjort en SELECT så vill vi förmodligen presentera resultatet på en sida.

Bild 5: Visa resultatet

En del grejer som behöver förklaras här:
  • Rad 17: while är en loop som körs så länge villkoret är sant. Villkoret i detta fall är
    $row = mysql_fetch_array($result) och det kommer att bli false när det inte finns fler rader att hämta i resultatet (alltså det vi fått tillbaka på vår SELECT-query)
    -
  • Rad 18: Iom att vi hämtar rad för rad ur resultatet och gör om till en array (mysql_fetch_array($result)) som vi sedan sparar i $row så innebär det nu att $row är en array med index som den hämtat från fältnamnen i tabellen och värden som den hämtat från fälten i tabellen (se exempel på nästa sida.


for_namn | efter_namn
---------------------------------
Olle | Persson
---------------------------------
Olle | Svensson

Tabell 1: Tabellen så som den ser ut i databasen


De värden som sparas i $row blir därför i första vändan i loopen:
$row[”for_namn”] = ”Olle”
$row[”efter_namn"] = ”Persson”
Utskriften till dokumentet blir därför:
Persson, Olle<br />

I andra vändan i loopen blir värdena i $row:
$row[”for_namn”] = ”Olle”
$row[”efter_namn”] = ”Svensson”
Utskriften till dokumentet blir därför:
Svensson, Olle<br />
Tredje vändan i loopen kommer att ge false därför att $result inte innehåller fler rader. Då bryts while-loopen och inga fler utskrifter sker.
 
Last edited:
Jag ska städa upp denna tråden och göra den så användar vänlig som möjligt, ha det så kul när ni använder lathunden!
 
Moved to Swedish board.

Swedish is only allowed in the Swedish board.
 
Ser väl bra ut :) Ska man vara petig så bör man köra fetch_assoc istället för fetch_array i och med att assoc är snabbare. Man använder inte numeriska keys så ofta när man hämtar ut data från databsen :p
 
Måste hålla med spice, det ser lite rörigt ut. Använd kodtaggarna för dom olika språken. T ex när du skriver ut php kod så skriv dom innanför
PHP: 
 taggarna, en starttag och en sluttag.
Finns även en [html] tagg du kan använda dig av när du skriver ut htmlkod på.
 
Du missade en viktig grej; säkerhet. Till exempel query delen; att använda data från användaren i en query utan att filtrera innehållet är väldigt dumt att göra.

(Skummade igenom så jag kanske missade att du tog med. Om är så fallet så ber jag om ursäkt.)
 

Similar threads

Kiman
C++/Lua kunnig Svensk sökes för nytt projekt
Replies
3
Views
518
Offishall
Offishall
Back
Top