Vissa av CSS3s egenskaper är lite mer vanligt förekommande än de andra. Här är de vanligaste och hur de fungerar med exempel.

Border-radius
Rundar hörnen på div-boxar.

Exempel: border-radius: 10px;

Desto högre värde, desto rundare hörn. Vid ett visst värde får man en cirkel och efter det spelar det ingen roll hur mycket värdet ökas.

Box-Shadow
Lägger på en skugga under en div-box.

box-shadow: x-offset y-offset blur (spridning) färg

Exempel 1: Skuggan hamnar på högersida och vid botten med färgen svart
box-shadow: 5px 5px 10px black;

Exempel 2:Skuggan hamnar på vänstersida och vid toppen med färgen svart
box-shadow: -5px -5px 10px black;

Exempel 3: Med rgba istället för färgen kan man även sätta alfa-värden, vilket är värdet på transparensen.
box-shadow: 5px 5px 10px rgba(0,0,0, .3);

Exempel 4: Exempel med spridningen som är ett frivilligt värde man kan sätta.
box-shadow: 5px 5px 10px 10px rgba(0,0,0, .3);

Exempel 5: Man kan lägga fler skuggor på varandra så här.
box-shadow: 5px 5px 10px rgba(0,0,0, .3),
5px 5px 11px green;

Exempel 6: En skugga som går runt hela boxen.
box-shadow: 0 0 2px 1px rgba(0,0,0,0.3)

Text-Shadow
Lägger på en skugga på texter.

text-shadow: x-offset y-offset blur färg

Exempel 1: Lägger på en skugga åt vänster och på botten som är röd.
text-shadow: 5px 5px 2px red;

Exempel 2: Lägger på en skarp skugga på botten-delen av en text som att det finns belysning bakom texten.
text-shadow: 0 1px 0 #ffffff;

Gradients
Lägger på en gradient på div-boxen eller på hela rutan om man vill. Kan kräva att man har prefixes för att det ska funka. Kör den alltså genom prefixr.com.

linear-gradient(riktning, från-färg, till-färg)

Exempel 1: Lägger på en gradient uppifrån och ned som börjar med svart och avslutas med vit.
linear-gradient(top, black, white);

Exempel 2: Lägger på flera gradients uppifrån och ned. Man kan lägga på hur många färger som helst.
linear-gradient(top, black, red, white);

Exempel 3: Lägger på en gradient där det är bestämt var en viss färg ska sluta.
linear-gradient(top, black 30%, white);

Exempel 4:Lägger på en gradient där svart slutar vid 50% och vit börjar vid 50%, vilket skapar en skarp linje.
linear-gradient(top, black 50%, white 50%);

Columns
Fördelar texten i en div till flera kolumner.

columns: antal kolumner eller längd på kolumner

Exepmel 1: Skapar tre kolumner.
columns: 3;

Exepmel 2: Skapar så många kolumner som möjligt där varje kolumn är 100px brett.
columns: 100px;

Exepmel 3: Skapar så många kolumner som möjligt där varje kolumn är 100px brett med mellanrum mellan varje på 50px.
columns: 100px;
column-gap: 50px;

Media queries
Ger möjlighet att använda olika egenskaper för olika storlekar på skärmen.

@media screen and (max-width: maxlängd på fönstret)

Exempel 1: När fönstret minskas till mindre än 500px hoppar texten över till en kolumn.
@media screen and (max-width: 500px){
p{
columns: 1;
}
}

Font-face
Använda vilken font som helst.

@font-face{
font-family: “namn”;
src: url(‘filnamn.eot’); //För Internet explorer
src:
url(‘filnamn.eot?#iefix’) format(’embedded-opentype’), //För gamla Internet explorer
url(‘filnamn.woff’) format(‘woff’), //Chrome och Safari
url(‘filnamn.ttf’) format(‘truetype’), //Firefox
url(‘filnamn.svg#namn’) format(‘svg’); //iPad och iPhone
font-weight: normal;
font-style: normal;
}

div{
font-family: ‘namn’;
}

Har man Xampp och Codeigniter installer lokalt på sin dator så är det inte helt uppenbart hur man ansluter från Codeigniter till MySQL-databasen.

För det första om Apache lyssnar på port 80 så ligger phpMyAdmin på adressen http://localhost/phpmyadmin. Om den lyssnar på vilken annan port som helst måste man skriva in det portnumret. Alltså: http://localhost:xxxx/phpmyadmin. Vilken port Apache lyssnar på hittar man i httpd.conf-filen.

För det andra måste man anropa sin databas med en användare som har rättigheter att ansluta till den specifika databasen och som har rättigheter att göra allt annat också. Som standard med Xampp kan man ansluta till sin databas utan vare sig användarnamn eller lösenord. Försöker man anropa sin databas utan användarnamn från Codeigniter får man felmeddelandet Unable to select the specified database, eftersom denna användare inte har rätten att göra något med databasen. Anslut istället med användare root och inget lösenord så kommer det att funka. Användare root har rättigheter att göra vad som helst med databasen.

För det tredje, om Apache lyssnar på annan port än port 80 måste man i Codeigniters database.php-fil ange vilken port MySQL lyssnar på. I vanliga fall är detta 3306.

Så här kan det se ut i Codeigniters database.php-fil som exempel:
$db[‘default’][‘hostname’] = ‘localhost:3306’;
$db[‘default’][‘username’] = ‘root’;
$db[‘default’][‘password’] = ”;
$db[‘default’][‘database’] = ‘min_databas’;
$db[‘default’][‘dbdriver’] = ‘mysql’;

Hämta thepiratebay med cURL

June 22nd, 2014 | Posted by admin in How-to | Tips | Webbutveckling - (2 Comments)

Att hämta thepiratebay(.se) med cURL borde vara ganska lätt. Thepiratebay skickar tillbaka responsen till en request i gzip-format. Därför behöver man avkoda svaret för att se html-koden istället för gzip-kodningen. Detta gör man i requestheadern där man sätter Accept-Encoding till gzip. Alltså:

header_array[] = “Accept-Encoding: gzip”;
curl_setopt(CURLOPT_HTTPHEADER, $header_array);

Om detta inte funkar så kan man också testa att sätta CURLOPT_ENCODING till gzip. Alltså:

curl_setopt($ch, CURLOPT_ENCODING, “gzip”);

Nu kommer man få response-bodyn i vanlig html.

När man använder en textruta med html-taggen <textarea> och sedan använder ett PHP script för att hantera texten så händer det att radbrytningarna försvinner när man skickar tillbaka texten till webbläsaren. Till exempel om man skriver:

Textrad 1

Textrad 2

Textrad 3

Så får man:

Textrad 1Textrad 2Textrad 3

Detta händer för att radbrytningar i en <textarea> representeras ofta av tecknena \r\n. Anledning till att radbrytningar för text i en textarea representeras på det här sättet är för pågrund av de standarder som finns för att skicka text på internet och allmän men vanlig flummighet kring webbteknikers standarder.

I vilket fall som helst så löser man problemet enklast genom att använda PHP-funktionen nl2br(). När man anger sin text som argument i denna funktion så lägger funktionen in en <br /> framför alla radbrytningar och då blir utskriften av radbryningar korrekt.

Codeigniter är ett bra framework för php. Men det finns ett jobbigt moment med detta framework, och det är att index.php inte automatiskt tas bort från url:er trots att man oftast inte vill ha det i sina projekt.

I user guiden rekommenderar de att man använder .htaccess-filen och modrewrite för att ta bort index.php. De rekommenderar följande bit modrewrite kod:

RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]

Stycket innebär att index.php plockas bort men man får även normal tillgång till index.php-filen, en mapp som heter images och robots.txt filen.

Jag hittade ett modrewrite-stycke på nätet som tar bättre hänsyn till vad en användare begär i sina url:er:


RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^system.*
RewriteRule ^(.*)$ /index.php?/$1 [L]

RewriteCond %{REQUEST_URI} ^application.*
RewriteRule ^(.*)$ /index.php?/$1 [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]


ErrorDocument 404 /index.php

I det här fallet kommer index.php att tas bort, men man har även normal tillgång till alla filer och mappar och inte bara till de filer och mappar som exklusivt är namngivna som i första fallet.

Sen finns det ett irriterande special fall som förutom modrewrite kräver en extra åtgärd. Det är när man använder form_open-metoden som ingår i Form Helper som är specialfallet. När man använder denna metod för att ange den öppnande

-taggen för ett formulär och sedan använder formuläret och skickar iväg det så ser man att index.php återvänder i url:erna på den resulterande sidan, trots att man använder en htaccess-fil för att ta bort index.php. Lösningen här är enkel men inte helt uppenbar. Öppna config.php i config-mappen. Omkring rad 30 ser du att det står:

$config[‘index_page’] = ‘index.php’;

Men som det står i den beskrivande texten för denna inställning så ska denna inställning lämnas blank när man använder en htaccess-fil för att ta bort index.php. Så det är bara att ändra denna till:

$config[‘index_page’] = ”;

Nu ska index.php vara borta i alla url:er överallt när man använder Codeigniter.

Det finns en del anledningar till att lösenordsskydda en webbsida, till exempel att man vill ha en privatsida eller att man håller på att utveckla sidan och vill hålla den privat under utvecklingstiden. Om man har en Apache-server så är det väldigt smidigt att använda htpasswd och htaccess. Så här gör man.

1. Skapa en fil som heter .htaccess och en som heter .htpasswd. Om Windows vägrar skapa dessa filer så googla upp redan färdigskapade sådana.
2. Kopiera in följande text stycke i .htaccess-filen:

AuthName “En titel”
AuthType Basic
AuthUserFile /fullständig/sökväg/till/.htpasswd
Require valid-user

3. Ändra “En titel” till en egen titel. Låt citattecknena vara kvar.
4. Ändra /fullständig/sökväg/till/.htpasswd till den fullständiga sökvägen till där .htpasswd kommer ligga. OBS det måste vara den fullständiga sökvägen.
5. Ladda upp .htaccess-filen till den mappen (och undermapper) som du vill lösenordsskydda. I de flesta fall borde detta vara root-mappen för din webbsida. Men du kan skydda bara undermappar om du vill.
6. Googla upp en .htpasswd-generator. Till exempel denna.
7. Skriv in ett användarnamn och ett lösenord och generera lösenordet.
8. Kopiera in hela den genererade text-biten till din .htpasswd fil.
9. Ladda upp .htpasswd-filen till samma mapp där .htaccess-filen ligger.

Nu är det bara att ladda om sidan så kommer det poppa upp en inloggningsruta. Klart!

Teckenhelvete med MySQL och PHP

August 15th, 2012 | Posted by admin in Databas | Tips | Webbutveckling - (0 Comments)

Håller på och kodar på en ny sida (extentor.nu). Stötte på problemet att åäö-teckena visades som ett frågetecken. Jag har stött på problemet förr så jag brukar vara noga inför nya projekt att överallt använda UTF-8. För det här är en av de vanligast förekommande problemen, men ändå mest svårlösta problemen när man håller på med webbutveckling. Problemet kan sitta var som helst i kedjan mellan databasen till webbläsaren. Håller man tungan rätt i mun och kommer ihåg att sätta UTF-8 över allt så ska det inte vara något problem. Men nu fick jag alltså problemet ändå.

Jag startade ett omfattande felsökningsarbete där jag gick igenom hela kedjan från databasen och försäkrade mig att det på alla ställen stod UTF8. Men det löste inte problemet. Så jag började googla på det. Jag fick upp en del bra artiklar om problemet, men alla handlade uteslutande om att man råkat ha latin1 på ett ställe och UTF-8 på nåt annat ställe och hur man i sådana fall skulle kunna lösa problemet. En artikel som förtjänar ett hedersomnämnande är skrivet av hosting företaget Blue Box där de i detalj går igenom problemet och hur man löser det. En annan användbar källa verkar vara phpportalen där många har och har haft detta problem. Här finns en samlingstråd om detta problem. Och moderatorn marabou har skrivit en användbar checklista för vart problemet kan ligga. Men även artikeln från Blue Box och trådarna på phpportalen handlar främst om man att man råkat sätt latin1 på nåt ställe och UTF-8 på nåt annat ställe. Jag hade från början satt UTF-8 överallt och dubbelkollat att jag faktiskt gjort så.

En annan märklig grej var att åäö fungerande normalt på alla sidor förutom på en sida. Så jag började skriva ut åäö på olika sidor för att se var de fungerade och var de inte gjorde det. Denna godtyckliga strategi mynnade ut i att jag hittade problemet. Jag använde php-funktionen substr för att plocka ut en kortare del av kursnamnet och jag antar att substr inte har stöd för UTF-8, eller snarare för multibyte encoding. I php finns det en motsvarande funktion för substr som klarar av multibyte encodings. Den heter mb_substr. När jag använde denna funktion så löste det problemet.

Att det kan vara en php-funktion som inte klarar av multibyte encodings som är problemet är inget man tänker på direkt. Men det kan vara så och jag hoppas på att denna artikel besparar en del utvecklare en del huvudvärk.

&-tecknet i PHP

February 23rd, 2010 | Posted by admin in Webbutveckling - (0 Comments)

När jag läser PHP-tutorials där det används objektorienterade programmeringsexempel så ser jag ofta kodstycken som innehåller termen: “&amp;”. Vilket förvirrade mig väldigt mycket i början.

Det visade sig att &amp; bara var ett “tryckfel”. &amp; används i HTML och betyder samma sak som & (ampersand). Det är ett säkrare sätt att skriva &. Så när man skriver & i en text som till exempel ska lagras i en databas så burkar man omvandla & till den säkrare formen &amp;. Problemet i de tutorials jag har läst har varit att när de läser in texten från databasen så har de alltid missat att omvandla &amp; tillbaka till &, vilket skapat förvirring. Se följande exempel:

$this->$model =&amp; new $model; //Exempel med tryckfel

$this->$model =& new $model; //Hur det egentligen ska se ut

Och i detta sammanhand betyder & att objektet ska skapas genom referens (kommer ursprungligen från C).

När man vill ha ett forum till sin webbsida så är det smidigaste och vettigaste att välja tredjepartsmjukvara för forumet. Då vill man troligen också integrera forumets loggin-system och andra egenskaper med sin sida. Att integrera phpBB 3.0 är väldigt enkelt, trots att phpBB 3.0 inte har ett api.

Denna artikel på phpBB:s sida går igenom hur man enkelt integrerar phpBB sessioner med sin webbsida.