[Projektvorstellung] Rajax - Rapid Ajax Development

**Hendy** · 10.07.2011 16:39

Hallo,

ich wollte mein Projekt vorstellen,
da ich Anregungen/Kritiken gut gebrauchen könnte.

Name: Rajax - Rapid Ajax
Lizens: http://www.gnu.org/licenses/gpl-3.0.html
Zielgruppe: frontend webentwickler
Version: 0.05
Github: repo
Dokumentation: http://doc.rajax.rpg-stars.de/

Kenntnis voraussetzungen:

-javascript,ajax
-mvc
-jquery
-php, oop php
-html,css

Webserver voraussetzungen:

-php 5.2 bis 5.3.x

Rajax verwendet:

-Zend Frameworks Db Class/Autoloader - framework.zend.com
-jQuery - jquery.com
-Zen-PHP - code.google.com/p/zen-php/

Kurzbeschreibung:

Rajax soll den Ablauf der Entwicklung einer Ajax basierten Seite verkürzen.
Durch die Frontend und Backend Bibliotheken ist es möglich in windeseile Daten aus der Datenbank
formatiert im Backend in einen html Bereich schreiben zu lassen.

Wie in einem CMS üblich wird aus der Datenbank den Inhalt einer Seite dargestellt.
Genau das Prinzip geht Rajax nach. Eine Tabelle aus der Datenbank könnte für einen Punkt auf einer Seite stehen.
Dieser Punkt könnte mehrere Seiten beinhalten.

Es soll das Designen der Seite in den Vordergrund bringen, da nurnoch wenig im Backend getan werden muss.

Wie Rajax funktioniert:

1. User input von der Maus oder jeder anderen möglichen Form empfangen
2. Ausführung von funktionen in der main.js(oder anderer *.js Dateien)
3. Datenanfrage an den backend bereich der Applikation schicken
4. Daten von SQL-Datenbank empfangen
5. Einpflegen in HTML Datei

Zum Beispiel eine simple html Datei:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    RLoad = {};
    RLoad.PreloaderSrc = 'img/preloader.gif'; // ein preloader bild der beim laden angezeigt wird
    RLoad.Scripts = [
    'js/main.js' // steht für die hauptdatei die die vom entwickler erstellten anfragen an den server enthält
    ];
</script>
<script src="js/rajax/Rajax.Autoloader.js"></script> <!-- ladet alle rajax Dateien für das Frontend -->
</head>
<body>
<section id="container">
<!-- daten von rajax -->
</section>
</body>
</html>

PHP-Code:


<article>
    <h3><?php print $id; ?>
    <p><?php print $text; ?>
</article>

Nun wird ein Anfrage an den Server gerichtet:

Wie funktioniert eine Anfrage in Rajax?

Ein bestimmter Controller wird angesprochen mit einer bestimmten Methode z.B. "wordpress_getPages"
Controller: wordpress, Methode: getPages()

Es ist möglich die Daten in 3 verschiedenen Ausgabeformaten zu bekommen: html, json, xml

Optionen bieten die Möglichkeit, die Daten in selbst manipulierter Form wieder zu bekommen.
Das html format bietet standardmäßig 2 verschiedene optionen an:
Alle einträge werden mit dem template genutzt.
- template:file=src

Abwechselnd wird template A und B genutzt.
-template: odd=src;even=src

Man kann auch den eigenen Controllerfunktionen "Ereignisse" bei bestimmten optionen zuweisen.

Zum beispiel wie die template:file=path_to_file option gebaut wurde:

PHP-Code:


if($this->options['_type'] == 'template' && isset($this->options['_type']))

{

   // do something cool

}

Man kann zusätzliche Werte mitgeben an den Controller. Sie werden in der Regel benutzt um die richtigen
Daten aus der Datenbank zurückzugeben.

z.B. page/MeinePage

wird an die getPageByName Funktion im wordpress Modul gesendet. Die Funktion nimmt sich "MeinePage"
und such in der Datenbank danach und gibt das Ergebnis zurück.

Nun wird die $.rGet Methode aufgerufen in der main.js, die durch den Autoloader mit geladen wurde:

Code:

$(function() {$('#content').rGet('test_holeDaten/html/template');
});

nun wird ein Request an das Backend geschickt, es wird durch eine Routing klasse
an einen Controller geschickt(test) und ruft die Methode holeDaten auf.

Die test klasse:

PHP-Code:


class test extends Rajax_Controller 
{
    public function holeDaten()
    {
        // ein query schreiben
        $sql = "select * from artikel";

        // eine liste der ergebnisse empfangen
        $ergebnis = $this->db->fetchAll($sql);

        // ausgeben des ergebnisses
        if(!$this->output($ergebnis)) // die output Funktion gibt die daten in jedem von rajax zur verfügung gestellten Format aus
        {
            // gibt eine fehlermeldung in dem gewählten format aus, falls die output Funktion false zurückgibt
            Rajax_Application::error404();
        }

 }
}

Nachdem wir die vom Server zurück bekommen haben werden die Daten von jQuery in #container geschoben.
Das Resultat würde so aussehen:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    RLoad = {};
    RLoad.PreloaderSrc = 'img/preloader.gif'; // ein preloader bild der beim laden angezeigt wird
    RLoad.Scripts = [
    'js/main.js' // steht für die hauptdatei die die vom entwickler erstellten anfragen an den server enthält
    ];
</script>
<script src="js/rajax/Rajax.Autoloader.js"></script> <!-- ladet alle rajax Dateien für das Frontend -->
</head>
<body>
<section id="container">
<article>
    <h3>test1<h3>
    <p>testtext</p>
</article>
<article>
    <h3>test2</h3>
    <p>testtext</p>
</article>
</section>
</body>
</html>

Rajax bietet von sich aus 2 Funktionen, um eine linkbasierte Seite zu erstellen:

$(selector).rajaxNavi() konvertiert links in Rajax kompatible Wörter.

HTML-Code:

<!-- before -->
<a href="page/Link1">Link1</a>
<a href="page/Link2">Link2</a>
<a href="page/Link3">Link3</a>

<script>$('a').rajaxNavi();</script>

<!-- after -->
<a href="#!/page/Link1">Link1</a>
<a href="#!/page/Link2">Link2</a>
<a href="#!/page/Link3">Link3</a>

$.rajaxWatch überwacht den Browser und die URL.
Es übeprüft ob im Objekt, das der Funktion übergeben wird,
ein Schlüssel passend eines Parameters in der URL mit übereinstimmt.
Bei erfolg wird die Funktion im Schlüssel ausgeführt.

HTML-Code:

$.rajaxWatch({
  startpage : function(e) {
     // do something first
  },
  onerror : function(e) {
    // if url parameter does not math any entry in this object
  },
  onload : function(e) {
    // startup of rajaxwatch
  },
  onchange : function(e) {
    // if url changes
    // making dynamic loading possible
  },
  custom1 : function() {},
  custom2 : function() {},
  custom3 : function() {}
},'startpage');

CMS - Teilunterstützung bis jetzt:
- wordpress db

Durch das wordpress Modul ist es möglich ,ohne die html Datei aufzuspliten in endlich viele teile,
grundlegende Funktionen wie blog und pages sowie blog/pages extern verlinkungen und navigation zu verwenden.

Das wordpress Adminpanel kann weiterhin benutzt werden.

Beispiele:
Animationsbeispiel
Beispiel mit Datenaustausch

Download

**Jesus_666** · 10.07.2011 20:52

Um ganz ehrlich zu sein... Was?

Ich will nicht gemein sein, aber dein Post liest sich wie eine PowerPoint-Folie ohne dazugehörige Präsentation. Das macht es wirklich schwer, herauszufinden, worüber du eigentlich sprichst. Ist Rajax eine IDE, ist es ein Toolset, ist es eine Bibliothek? Welche Probleme löst es? An wen richtet es sich ("Webentwickler" ist ein weites Feld)? Welche Technologien werden verwendet? Das ist alles nicht ersichtlich.

So, wie es aussieht, werden aus einem Photoshop-Bild über ein anderes Tool (welches?) die Grundlagen für eine datenbankgestützte Webanwendung (basierend auf PHP/PDO?) erzeugt und Rajax ist dann eine Point-and-click-Umgebung, über die man Skripte mit dem Markup verknüpfen kann. Entweder das oder die untere Grafik und der dazugehörige Text illustrieren einfach einen AJAX-Aufruf.

Du solltest einfach mal erklären, was Rajax ist, welche Probleme es lösen soll und wie es diese Probleme löst. Die Bilder mögen Sinn ergeben, wenn man mit dem Projekt vertraut ist, aber für Uneingeweihte sind sie doch eher kryptisch – und du kannst nicht von uns erwarten, daß wir auf deine Seite gehen und die Dokumentation wälzen; dann würden wir nämlich deine Präsentation für dich machen.

Eine Projektpräsentation sollte genug Informationen vermitteln, damit jemand mit grundlegenden Kenntnissen in der Materie (also ein völlig unbedarfter Webentwickler) sich ein Bild davon machen kann, was dein Projekt wie und warum tut, ob es für ihn nützlich wäre und welche Voraussetzungen er erfüllen muß, um einen Nutzen draus ziehen zu können. Solange du nicht mehr oder weniger das abdeckst, wirst du relativ wenig Aufmerksamekit kriegen, fürchte ich.

**makenshi** · 10.07.2011 21:26

Zudem solltest du Rechtschreibfehler wie Lizens und so Dinge wie "Real-life Beispiel" rausstreichen.
Nenn es kleinlich, aber beides vermittelt nicht unbedingt den Eindruck einer seriösen und durchdachten Präsentation.

**Whiz-zarD** · 10.07.2011 22:02

Sieht für mich nach AJAX + jQuery aus.

Thema: [Projektvorstellung] Rajax - Rapid Ajax Development

Themen-Optionen

Anzeige

[Projektvorstellung] Rajax - Rapid Ajax Development

Stichworte

Berechtigungen