Cutenews

Hey,
ik had weer zin om een tutorial te maken. Dus dacht ik om een cutenews tut te maken. Nou, hier is hij dan!
Inhoud
1. Voorwoord
2. Cutenews installeren
3. Cutenews inbouwen
4. Instellingen
5. Nieuws op site
6. Eerste nieuwsbericht
7. Slot
1. Voorwoord
Cutenews is een simpel maar uitgebreid nieuws systeem. Met een tal van voordelen. Een daarvan is dat cutenews geen ondersteuning vraagt van MySQL. Ik wil jullie in deze tut leren hoe je cutenews installeert, en hoe je uit gebruikt.

2. Cutenews installeren
Eerst en vooral moeten we cutenews uploaden naar onze website met de ftp.
Maar dat gaat moeilijk zonder dat we cutenews hebben. Download cutenews Hier.

Oke, wanneer je cutenews binnen hebt kunnen we verder gaan. Open met winrar cutenews, en pak hem uit in de map waar jij het wilt (bv: bureaublad). Daarna open we onze ftp (bv: Filezilla).
Voer al jouw gegevens in van je host. En uploaden maar!
Ga nu naar de url waar jij cutenews hebt neergezet.

Wanneer alles juist is kom je op de "cutenews installer".
Dus we kunnen verder gaan met installeren van cutenews. Druk nu op "proceed installation".

Nu gaat cutenews checken of bepaalde bestanden schrijfbaar zijn. Normaal is alles schrijfbaar.
Wanneer dit niet zo is moet je de bestanden CHMODen naar 777 of 644. Om dat te doen open je filezilla, verbind je met je host, open de map van cutenews, kies het bestand/map dat je moet CHMODen (bv: de map data). Daarna doe je rechtermuisknop op dat bestand/map en klik je op bestandsrechten. Nu zie je alle rechten ( eigenaarsrechten, groepsrechten, publieke rechten). En de numerieke waarde. Het simpelste is bij de numerieke waarde 777 in te voegen. Je kan ook alle rechten aanvinken. Wanneer dit gedaan is kunnen we verder gaan.

Nu gaan we het admin account aanmaken. maar eerst wil cutenews weten waar de map van cutenews zit. dus geef je de url waar cutenews staat, normaal staat die al goed. Daarna vullen we onze gebruikersnaam, wachtwoord (2x), nickname en email in.

(voorbeeld)

Zo, cutenews is geïnstalleerd en je kan succesvol inloggen!

3. Cutenews inbouwen
In dit hoofdstukje zullen we cutenews in je layout inbouwen. Daarvoor heb ik eerst een css-layoutje gemaakt als voorbeeld. Natuurlijk kan dit met jouw eigen layout.
de layout vind je http://jvdw.one2xs.com/cutenewslayout.html

(Htmlcode)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>CutenewsLayout</title>
  <style type="text/css">
  body {
  background-color: lightgray;
font-family: rockwell;
font-size: 13px;}
#container {
margin-left:auto;
margin-right:auto;
width: 500px; 
padding:5px;
background-color: white;
height: auto;
color: black;
border: 1px dotted gray;}
h1 {
text-align:center; 
text-decoration:underline;
}
#nieuws {
padding: 5px;
width: auto;
border: 1px dotted gray;}
.titel {
border: 1px dotted gray; 
padding-left: 5px;
}   

 </style>
</head>
<body>
<div id="container"><h1>Cutenews Layout!</h1>
<div id="nieuws">
<div class="titel">Hoi</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque egestas nisl, a ornare arcu pharetra ut. In nec suscipit turpis. Maecenas et pellentesque nisi.
</div>
</br>
<marquee>
Layout gemaakt door Jvdw. Als voorbeeld voor de Cutenews Tut. Mag gebruikt worden, niet verkocht!</marquee>
</div>
</body>
</html>

Nu gaan we dus de templates aanpassen. Log in in cutenews, wanneer het de eerste keer is geeft cutenews een waarschuwing aan. De install.mdu bestaat nog. Je kan hem automatisch verwijderen normaal. anders moet je het doen via je ftp. oke dit ter zijde. maar nu, ga naar options, en klik op "edit templates" daar heb je verschillende onderdelen.
1. Active news -> het nieuws.
2. Full story -> het gehele nieuws, wanneer je instelt dat je meer kan lezen wordt je naar dit onderdeel gestuurd.
3. Comment -> Zo ziet het eruit wanneer iemand reageert.
4. Add comment form -> Het formulier wanneer je wilt reageren.
5. News pagination -> toont hoeveel paginas nieuws erzijn.
5. Comment pagination -> toont hoeveel paginas reacties er zijn.

Oke nu gaan we elke template aanpassen.
» 3.1 Active news
Als het goed heb je nu,

<div style="width:420px; margin-bottom:30px;">
<div><strong>{title}</strong></div>

<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;">{short-story}</div>

<div style="float: right;">[full-link]Read more [/full-link]  [com-link]{comments-num} Comments[/com-link]</div>

Oke, we gaan nu alles wissen en we plakken ons nieuws divs erin in mijn geval dit:

<div id="nieuws">
<div class="titel">Hoi</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque egestas nisl, a ornare arcu pharetra ut. In nec suscipit turpis. Maecenas et pellentesque nisi.
</div>

daarin kunnen we dus codes plaatsen. Je ziet alle codes + uitleg boven jouw textarea.
bij de class titel hoort dus de titel.
dat wordt dan dit:

<div class="titel">{title}</div>

we zitten bij active news dus we voegen er de short story aan toe. Uiteindelijk hebben we dit:

<div id="nieuws">
<div class="titel">{title}</div>
{short-story}
</div>

Nu is het eigenlijk af, maar ik wil graag de auteur en datum erbij. En ook nog een lees meer linkje. Dus we maken 2divjes aan.

<div style="float:left;">Autheur + datum</div>
<div style="float:right;">lees meer</div>

De auteur is in cutenews: {author}, de datum is in cutenews: {date} en de lees meer link doe je zo: [full-link]Lees meer[/full-link].
Dan wordt het zo:

<div style="float:left;">Gepost door {author} op {date}</div>
<div style="float:right;">[full-link]lees meer[/full-link]</div>

Als laatste wil ik er dit aan toevoegen.

<div style="clear:both;"></div>

Dit zorgt ervoor dat de afbeeldingen niet over onze layout gaan.
En dan voegen we alles samen en krijgen we dit:

<div id="nieuws">
<div class="titel">{title}</div>
{short-story}
</br>
<div style="float:left;">Gepost door {author} op {date}</div>
<div style="float:right;">[full-link]lees meer[/full-link]</div>
<div style="clear:both;"></div>
</div>

» 3.2 Full story
Nu gaan we de full story inbouwen. Omdat het ongeveer hetzelfde is als "active news". wissen we alles in de full story en voegen we dit eraan toe:

<div id="nieuws">
<div class="titel">{title}</div>
{short-story}
</br>
<div style="float:left;">Gepost door {author} op {date}</div>
<div style="float:right;">[full-link]lees meer[/full-link]</div>
<div style="clear:both;"></div>
</div>

Het enige wat we moeten veranderen in deze template is {short-story} naar {full-story} en we verwijderen de lees meer link. want we lezen al meer. Dit verkrijg je dan als resultaat:

<div id="nieuws">
<div class="titel">{title}</div>
{full-story}
</br>
<div style="float:left;">Gepost door {author} op {date}</div>
<div style="clear:both;"></div>
</div>

» 3.3 Comment
Oke nu gaan we de layout van de reacties veranderen. Ook wil ik hier weer bij deze code blijven:

<div id="nieuws">
<div class="titel">{title}</div>
{full-story}
</br>
<div style="float:left;">Gepost door {author} op {date}</div>
<div style="clear:both;"></div>
</div>

Alleen moeten we hier wel wat meer aan veranderen. Eerst en vooral verwijderen we dit:

</br>
<div style="float:left;">Gepost door {author} op {date}</div>

En veranderen we {full-story} naar {comment}. Op de plaats van de full story komt nu de reactie van de auteur van de reactie.
De titel mogen we weglaten. Want een reactie heeft geen titel. Maar ik zou in de i.p.v. de titel dit zetten:

Reactie geplaats door {author} op {date}

Je kent waarschijnlijk al het principe, dus hij zal de auteur en de datum tonen. We krijgen als resultaat dit:

<div id="nieuws">
<div class="titel">Reactie geplaats door {author} op {date}</div>
{comment}
<div style="clear:both;"></div>
</div>

» 3.4 Comment form
Best passen we hier niet te veel aan aan. We gaan gewoon onze layout er om heen doen. En wat vertalen. Maar toch ga ik email weghalen. Ik vind niet dat mensen hun email moeten geven om te reageren. We hebben dus dit.

<table border="0" width="370" cellspacing="0" cellpadding="0">
    <tr>
      <td width="60">Name:</td>
      <td><input type="text" name="name"></td>
    </tr>
    <tr>
      <td>Smile:</td>
      <td>{smilies}</td>
    </tr>
    <tr>
      <td colspan="2">
      <textarea cols="40" rows="6" id=commentsbox name="comments"></textarea><br />
      <input type="submit" name="submit" value="Add My Comment">
      <input type=checkbox name=CNremember  id=CNremember value=1><label for=CNremember> Remember Me</label> |
  <a href="javascript:CNforget();">Forget Me</a>
      </td>
    </tr>
  </table>

Plaats boven deze code dit:

<div id="nieuws">
<div class="titel">Reageer</div>

Natuurlijk kan je reageer aanpassen naar eigen wens. En plaats onderaan dit:

<div style="clear:both;"></div>
</div>

Zo, nu zit onze layout daar omheen. Nu gaan we vertalen.
- Name wordt naam.
- Smile wordt emoticon.
- "Add My Comment" wordt "Voeg reactie toe"
- "Remember me" wordt "Onthoud mij"
- "Forgot me" wordt "Vergeet mij"
dan krijgen we dus dit:

<div id="nieuws">
<div class="titel">Reageer</div><table border="0" width="370" cellspacing="0" cellpadding="0">
    <tr>
      <td width="60">Naam:</td>
      <td><input type="text" name="name"></td>
    </tr>
  
    <tr>
      <td>Emoticon:</td>
      <td>{smilies}</td>
    </tr>
    <tr>
      <td colspan="2">
      <textarea cols="40" rows="6" id=commentsbox name="comments"></textarea><br />
      <input type="submit" name="submit" value="Voeg reactie toe">
      <input type=checkbox name=CNremember  id=CNremember value=1><label for=CNremember>Onthoud me</label> |
  <a href="javascript:CNforget();">Vergeet me</a>
      </td>
    </tr>
  </table>
<div style="clear:both;"></div>
</div>

» 3.5 News pagination
Hierbij hoeven we alleen maar te vertalen. ik ga het iets mooier maken. we hebben nu dit:

<p align="center">[prev-link]<< Previous[/prev-link] {pages} [next-link]Next >>[/next-link]</p>

We vertalen:
- Previous naar Vorige
- Next naar volgende
En ik wil dit er graag nog aan toevoegen:
- << wordt « ( html: « )
- >> wordt » ( html: » )
Dan krijgen we als resultaat dit:

<p align="center">[prev-link]&laquo; Vorige[/prev-link] {pages} [next-link]Volgende &raquo;[/next-link]</p>

» 3.6 Comments pagination
Nu kunnen we hetzelfde doen bij de reacties. We hebben dit:

<p align="center">[prev-link]<< Older[/prev-link] ({pages}) [next-link]Newest >>[/next-link]</p>

En we gaan vertalen:
- Older naar ouder
- Newest naar nieuwer
En dan kunnen we nog iets eraan toevoegen:
- << wordt « ( html: « )
- >> wordt » ( html: » )
Dan hebben we uiteindelijk dit:

<p align="center">[prev-link]&laquo; Ouder[/prev-link] ({pages}) [next-link]Nieuwer &raquo;[/next-link]</p>

Nu kunnen we alles opslaan en verder gaan!

4. Instellingen
We gaan terug naar options, en daarna naar system configurations.
Nu kunnen we van alles instellen. Ik overloop het samen met jullie even.

» 4.1 General
1. Full URL to CuteNews Directory -> Staan normaal goed want we hebben dat bij de installer al gedaan. verhuis je de map cutenews dan pas je dit best aan.
2. CuteNews Skin -> Je hebt keuze uit 3 layouts voor je paneel. Ik zou zeggen, kies de mooiste hieruit.
3. Time Adjustment -> wanneer cutenews verschilt van tijd pas je dit best aan. 60= 1 uur.
4. Smilies -> wanneer je nieuwe emoticons wilt toevoegen upload je die in de map smilies en voeg je die toe. alle smilies hebben de naam van de afbeeldingen zonder .png of andere. Wanneer je reageert zal de emoticon in de lijst verschijnen.
5. Auto-Archive every Month -> Als je "ja" zegt, zal elke maand al het nieuws naar het archief gestuurd worden.
6. Self-Registration Level -> wanneer iemand zich registreert zal hij een rang krijgen. je kan kiezen tussen "commenter" = iemand die alleen kan reageren. "journalist" = iemand die nieuws kan posten.

Goed gekozen? Saven maar!

» 4.2 News
1. Use avatars -> Wanneer je ja zegt kan elke gebruiker een eigen avatar hebben.
2. Use WYSIWYG Editor -> Wanneer je nieuws post kan je gebruik maken van een WYSIWYG editor ( WYSIWYG = What You See Is What You Get ).
3. Reverse News -> Het oudste nieuws staat boven aan.
4. Time Format For News -> De tijd code van het nieuws. wanneer je bv. 08/05/2011 wilt, doe je dit: d/m/Y.
5. Show Full Story In PopUp -> Wanneer je op lees meer klikt zal de lees meer in een Popup verschijven.
6. Settings for Full Story PopUp -> Hoef je niet in te stellen wanneer je het niet gebruikt.
7. Show Comments When Showing Full Story -> Toont alleen reacties bij de full story.

Alles oke? Druk op Save!

» 4.3 Comments
1. Auto Wrap Comments -> Toont hoelang een woord mag zijn dat bestaat uit letters. wanneer dit een woord langer dat dit wordt gesplitst.
2. Reverse Comments -> Bij ja staat de nieuwste reactie bovenaan.
3. Comments Flood Protection -> Is de tijd dat tussen 2reacties moet zitten. in seconde.
4. Max. Length of Comments in Characters -> Hoelang de reactie maximum mag zijn, 1=1 letter.
5. Comments Per Page (Pagination) -> Hoeveel reacties er per pagina zijn.
6. Only Registered Users Can Post Comments -> Ja= alleen geregistreerde mogen reageren.
7. Allow Mail Field to Act and as URL Field -> We hebben de email weggelaten. dus dit mag op nee blijven staan.
8. Time Format For Comments -> De tijd voor de reacties.
9. Show Comments In PopUp -> de reacties verschijnen in een popup.
10. Settings for Comments PopUp -> Wanneer nee, hoef je dit niet in te stellen.
11. Show Full Story When Showing Comments -> wanneer de reacties getoond worden toont hij ook de full story als je ja zegt.

Goed ingestelt? Save that!

» 4.4 Notifications
Wanneer een nieuwe registratie, reactie of nieuws is toegevoegd krijg je een email. als je "Ja" instelt.

5 Nieuws op site
We zijn aangebroken bij het laatste hoofdstukje!
We gaan nu ons nieuws op onze site zetten.
Ga naar options en dan Integration Wizards (News and RSS), en dan Integrate News into your site.
1. Number of Active News to Display -> Hoeveel nieuws er op de site mag staan. Bv: 5, wanneer er 6 nieuwsberichten zijn wordt het "news pagination" geactiveerd.
2. Template to Use When Displaying News -> Welke template cutenews moet gebruiken, wij hebben "default" aangepast. Dus we gebruik deze template.
3. Categories to Show News From -> Je kan bij "options" categories toevoegen. Wanneer je geen categories hebt, staat dit automatisch uit.
4. Start Displaying From... -> vanaf ... wordt het nieuws getoont. stel je 2 in, dan staan de 1ste 2 nieuwsberichten er niet op, de rest wel.
5. Reverse News Order -> de volgorde de zal omgekeerd worden wanneer je het activeert.
6. Show Only Active News -> Toont geen nieuws uit de archieven.
7. Static Include -> Alleen activeren wanneer je 2 of meer templates op 1 pagina gebruikt.

Proceed wanneer alles goed is!

En dan krijg je jouw PHPcode van het nieuws bv:

[COLOR= #0000BB]<?PHP
$number[/COLOR][COLOR= #007700]=[/COLOR][COLOR= #0000BB]5[/COLOR][COLOR= #007700];[/COLOR]
[URL="http://www.php.net/include"]include[/URL][COLOR= #007700]([/COLOR][COLOR= #DD0000]"/home/jvdw/domains/jvdw.one2xs.com/public_html/cutenews/show_news.php"[/COLOR][COLOR= #007700]);[/COLOR]
?>

Nu open je het html bestandje van je layout. en plak de code waar nodig. Sla het bestand dan op als .php!
Doen we het voor onze layout dan krijgen we dit.

(voorbeeld)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>CutenewsLayout</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <style type="text/css">
  body {
  background-color: lightgray;
font-family: rockwell;
font-size: 13px;}
#container {
margin-left:auto;
margin-right:auto;
width: 500px; 
padding:5px;
background-color: white;
height: auto;
color: black;
border: 1px dotted gray;}
h1 {
text-align:center; 
text-decoration:underline;
}
#nieuws {
padding: 5px;
width: auto;
border: 1px dotted gray;}
.titel {
border: 1px dotted gray; 
padding-left: 5px;
}   

 </style>
</head>
<body>
<div id="container"><h1>Cutenews Layout!</h1>
[COLOR= #0000BB]<?PHP
$number[/COLOR][COLOR= #007700]=[/COLOR][COLOR= #0000BB]5[/COLOR][COLOR= #007700];[/COLOR]
[URL="http://www.php.net/include"]include[/URL][COLOR= #007700]([/COLOR][COLOR= #DD0000]"/home/jvdw/domains/jvdw.one2xs.com/public_html/cutenews/show_news.php"[/COLOR][COLOR= #007700]);[/COLOR]
?>
</br>
<marquee>
Layout gemaakt door Jvdw. Als voorbeeld voor de Cutenews Tut. Mag gebruikt worden, niet verkocht!</marquee>
</div>
</body>
</html>

http://www.jvdw.one2xs.com/cutenewslayout.php
6. Eerste nieuwsbericht
We zijn klaar! (Juicht) Maar we moeten nu toch wel eens testen of alles goed staat.
Dus we zullen een nieuwsbericht posten. Open cutenews en ga naar add news.
De short story komt op de hoofdpagina. Dus vul daar wat in. bv: Dit is mijn eerste nieuwsbericht. Daarna klik je op toggle Full-Story, dan kunnen we het echte nieuw schrijven.
Wanneer je het nieuws hebt gepost kan je het nieuws toevoegen. druk op "add news".
Ga nu naar je site, en bekijk jouw nieuwbericht!
Gefeliciteerd!
7. Slot
Dit was het weer, ik hoop dat ik jullie wat heb bijgeleerd. Want heb hier heel mijn zondag aan besteed. Wil je meer weten, vertel het mij. Dan maak ik een tut bij. Voor kleine vragen kan je in dit topic terecht. Ik zal je zo goed en snel mogelijk proberen helpen.

Geweldige tutorial! 10/10 .

Handig !

Handig

Dankje Blij dat ik kon helpen

ik snap er niks van

Te lui om te lezen

Dit :

[COLOR= #0000BB]<?PHP
$number[/COLOR][COLOR= #007700]=[/COLOR][COLOR= #0000BB]5[/COLOR][COLOR= #007700];[/COLOR]
[URL="http://www.php.net/include"]include[/URL][COLOR= #007700]([/COLOR][COLOR= #DD0000]"/home/jvdw/domains/jvdw.one2xs.com/public_html/cutenews/show_news.php"[/COLOR][COLOR= #007700]);[/COLOR]
?>

Kan volgens mij veel korter zo :

[COLOR= #0000BB]<?PHP
$number[/COLOR][COLOR= #007700]=[/COLOR][COLOR= #0000BB]5[/COLOR][COLOR= #007700];[/COLOR]
[URL="http://www.php.net/include"]include[/URL][COLOR= #007700]([/COLOR][COLOR= #DD0000]cutenews/show_news.php[/COLOR][COLOR= #007700]);[/COLOR]
?>

@sanderosz, als je alles leest kom je er vast wel.

@paulvandijk, Tja...

@maartennl, kan niet.

http://www.jvdw.one2xs.com/cutenewslayout.php

script is er niet

Jvdw schreef:

@maartennl, kan niet.

Kan wel

@desire, zal thuis eens kijken, zit nu op ipad.
@nielsie volgens cutenews is het beter zo.
Edit: ik moet echt leren typen op ipad

Handig, ga het wss op mijn site zetten. En ook een uitgebreide tutorial.

Wdbs schreef:

Handig, ga het wss op mijn site zetten. En ook een uitgebreide tutorial.

Oké dankje, mocht je vastzitten/probleem hebben. Kan je me altijd een pbtje sturen

Ik snap dit niet:

Wanneer alles juist is kom je op de "cutenews installer".
Dus we kunnen verder gaan met installeren van cutenews. Druk nu op "proceed installation