Archiv nach Kategorien: Javascript

SVN :: Backup and Restore Scripting

Hat man ein privates SVN Repository muss man sich auch selbst um ein Backup kümmern. Wird nicht vom ganzen Rechner ein Backup gemacht, so helfen kleine Scripte, die durch Crontabs gestartet werden. Zu diesem Zweck habe ich mir selbst ein kleines Script gebaut:

#!/bin/bash
backupDate=$(date +%Y%m%d-%H%M)
backupSrc="/svn"
backupDest="/svn/_BACKUP"
restoreScript="#!/bin/bash
sudo mkdir /$backupSrc
mkdir /$backupDest"

rm $backupDest/*
cd $backupSrc

for repo in *; do
        if [ "$repo" != "_BACKUP" ] ; then
                echo "backup: $repo"
                svnadmin dump $repo > $backupDest/$backupDate-$repo.svn.dump
                restoreScript="$restoreScript
sudo svnadmin create $backupSrc/$repo
sudo svnadmin load $backupSrc/$repo < $backupDate-$repo.svn.dump
"
        fi
done

cd $backupDest


restoreScript="$restoreScript
cd /
sudo chown -R www-data:subversion $backupSrc"
cd $backupDest
echo "$restoreScript" > restore.sh
chmod +x restore.sh

tar -cf $backupDate-svn.tar *.dump restore.sh

#copy
cp $backupDate-svn.tar /BACKUP/svn/

Will man noch sicherer sein, kann man das Backup mittels scp auch noch auf einen über das Internet erreichbaren PC speichern. Hierfür muss der RSA oder DSA Key noch auf dem Remote PC in die Datei „authorisized_keys“ eingetragen werden, und folgende Zeile im Script ergänzt werden:

scp -P PORT $backupDate-svn.tar USER@SERVER.de:/PFAD_ZU_BACKUP
VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Javascript :: table-Klasse

meine erste selbst geschriebene Javascript-Klasse.

function Table(id) {
	this.rows = 0;
	this.cols = 0;
	if(id != null)
		this.table = document.getElementById(id);
}

Table.prototype = {
	createTable: function(parentElement,id,rows,cols,contentArray) {
		this.table = document.createElement("table");
		this.table.setAttribute("id",id);
		document.getElementById(parentElement).appendChild(this.table);

		for(var i_rows = 0; i_rows < rows; i_rows ++) {
			this.addRow(contentArray[i_rows*cols]);
		}

		var colArray = new Array();
		for(var i_cols = 1; i_cols < cols; i_cols ++) {
			for(var i_rows = 0; i_rows < rows; i_rows ++) {
				colArray[i_rows] = contentArray[i_rows*cols+i_cols];
			}
			this.addCol(colArray);
		}
	},

	addRow: function(content) {
		var newrow = document.createElement("tr");
		var existingRows = this.table.getElementsByTagName("tbody");

		if(this.rows == 0)
		{
			var newTbody = document.createElement("tbody");
			newTbody.appendChild(newrow);
			this.table.appendChild(newTbody);
			existingRows = this.table.getElementsByTagName("tbody");
			if(this.cols == 0)
				this.cols ++;
		}

		for(var i = 0; i < this.cols; i++) {
			newrow.appendChild(this.createNewCell(content[i]));
		}
		existingRows[0].appendChild(newrow);
		this.rows ++;
	},

	addCol: function(content) {
		if(this.rows == 0)
			this.addRow(content);
		else {
			var existingRows = this.table.getElementsByTagName("tr");
			for(var i = 0; i < this.rows; i++) {
				existingRows[i].appendChild(this.createNewCell(content[i]));
			}
			this.cols ++;
		}

	},

	setClass: function(css_class) {
		this.table.className = css_class;
	},

	createNewCell: function(content) {
		var newcell = document.createElement("td");
		var newcontent = document.createTextNode(content);

		newcell.appendChild(newcontent);
		return newcell;
	}
}

diese Klasse kann wie folgt aufgerufen werden

//hier muss schon folgendes im HTML-Code existieren:var table = new Table('mytable');
table.addRow('1');
table.addCol('2');
table.addCol('3');
table.addRow(new Array('4','5','6'));
table.addCol(new Array('7','8'));
table.addRow(new Array('9','10','11','12'));
table.setClass('border');

//oder so, wenn noch nichts exisitert außer z.B.
var table1 = new Table();
content = new Array('1','2','3','4',
	'5','6','7','8',
	'9','10','11','12');
table1.createTable('parent','table1',3,4,content);
table1.setClass('border');

Viel Spaß damit!

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

search while typing

Auf fast jeder Homepage gibt es ein Suchfeld. Wenn man dort was eingibt ist man sich oft nicht wirklich sicher wie man den gesuchten Begriff schreibt. Google bietet ein Feld an, das während der Eingabe schon anfängt zu suchen und bietet einem Vorschläge.
Hierfür wird Javascript benötigt. Mit Hilfe von Javascript kann mittels AJAX eine PHP – Datei angesprochen werden, die z.B. eine MYSQL – Datenbank anspricht und von dort die Vorschläge holt.

Überwachen des Eingabefeldes

wir wollen Feststellen, ob eine Eingabe gemacht wurde. Sobald das erste Zeichen in dem Eingabefeld ladet soll auch schon nach Vorschlägen gesucht werden. Leider wie so oft muss für den Internet Explorer mal wieder eine gesonderte Version existieren siehe hierzu unter addEvent (fixed im Internet Explorer das Kommando „addEventListener“)

Hier unsere erste Funktion die das Eingabefeld überwacht:

var input_keywords;
function init()
{
	var input_keywords = document.getElementById("keywords");
	addEvent(input_keywords,"keyup",search);
}

über der Funktion wurde noch die Variable input_keywords definiert, sie muss hier global sein, weil sie später noch in mehreren Funktionen verwendet werden soll. Die Funktion init() sollte aufgerufen werden, sobald die Seite fertig geladen ist. Am einfachsten realisiert man das, indem man den HTML-Tag body wie folgt anpasst:

In der zweiten Zeile von der Funktion „init“ wird ein Event-Listener auf das Eingabefeld gesetzt. Dieses hat hier die id „keywords“, es wird beim loslassen einer Taste die Funktion search aufgerufen.

AJAX um die Vorschläge zu erhalten

ich verwende immer folgenden Code um ein AJAX – Object zu erstellen:

function erzXMLHttpRequestObject()
{
	var resObjekt = null;
	try
	{
		resObjekt = new ActiveXObject("Microsoft.XMLHTTP");			//Internet Explorer
	}
	catch(Error)
	{
		try
		{
			resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
		}
		catch(Error)
		{
			try
			{
				resObjekt = new XMLHttpRequest();
			}
			catch(Error)
			{
				alert("Erzeugen eines XMLHttpRequest-Objekts ist fehlgeschlagen. Ajax ist nicht möglich");
			}
		}
	}
	return resObjekt;
}

um jetzt aber AJAX zu verwenden und unsere Vorschläge zu holen, brauchen wir noch folgenden Code:

function search(keywords)
{
        var http = null;
        http = erzXMLHttpRequestObject()
        if (http != null)
        {
           http.open("GET", "/search_while_typing.php?keywords=" + keywords, true);
           http.onreadystatechange = ausgeben;
           http.send(null);
        }
        function ausgeben()
        {
                if (http.readyState == 4)
                {
                        if(http.responseText.length > 0)
                        {
                                document.getElementById("search_result").innerHTML = http.responseText;
                                document.getElementById("search_result").className = "show";
                        }
                        else
                        {
                                document.getElementById("search_result").className = "hide";
                        }
                }
        }
}

wie man sieht sollen die Vorschläge in einem DIV-Container landen, der die id „search-result“ trägt. Die beiden Befehle mit dem className =“hide“|“show“; sprechen zwei CSS Klassen an, die den DIV verstecken oder bei Erfolg zeigen.
Der PHP-Datei werden die Suchbegriffe per URL übergeben. Die Variable trägt den Namen „keywords“

Die PHP Datei

um Vorschläge zu bekommen muss jetzt eine PHP – Datei vorhanden sein (hier: search_while_typing.php) die z.B. eine Verbindung zu einer Datenbank aufbaut und dort die nötigen Suchbegriffe sucht und an unsere Vorschlagsliste zurückgibt.

		

ganz oben werden mithilfe von „trim“ Leerzeichen und Zeilenumsprünge von dem Suchstring am Anfang und Ende entfernt. Danach werden Sonderzeichen „escaped“ mit Hilfe von Backslashes. Mit dem Befehl „preg_split“ wird der Suchstring an den Leerzeichen aufgespalten und in ein Array gespeichert.
Jetzt muss noch überprüft werden, ob die einzelnen Suchworte länger sind als ein Zeichen. Die Funktion „array_splice“ lässt hier nur eine maximale Anzahl von 4 Suchbegriffen zu. (In diesem Beispiel wird nur das erste Wort behandelt, es lässt sich aber einfach mit „AND“ und „OR“ in der MYSQL – Abfrage auf 4 zu suchende Wörter ‚aufstocken‘.
Nicht vergessen noch eine Datenbankverbindung aufzubauen. Jetzt können mit dem Beispiel- MYSQL-Befehl die Vorschläge gefunden werden. Diese werden dann weiter unten über die „while“-Schleife ausgegeben.

Optimierung und eigene Anpassung – Ideen zur Erweiterung

man könnte die Ausgabe in den Vorschlags-DIV in eine Liste umwandeln, ich hoffe man versteht was ich meine, also <ul> und <li>. Solche Listen lassen sich prima mit CSS formatieren.
Durch diese Liste könnte man zum Beispiel mit den Cursortasten rauf und runter navigieren und so einen bestimmten Vorschlag wählen. (die keycodes sind: UP: 38; DOWN: 40)
Des weiteren könnte man die Vorauswahl mit der Entertaste abschicken und dann an das eigentliche Suchscript der Seite weitergeben (keycode von Enter: 13)

Hier der Javascript-Code zum Abfragen einer Taste:

function check_key(event)
{
	event = event || window.event;
	if(event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
	{
	    ...
	}
}

Denkbar wäre bei „…“ eine Switchabfrage die dann die einzelnen Tasten behandelt.

<?php $keywords = $_GET[„keywords“]; if(trim($keywords)) { if(!get_magic_quotes_gpc()) $keywords = addslashes($search); if(strlen($keywords) < 50) { $searcharray = preg_split(‚/\s+/‘,$keywords); foreach($searcharray as $keyword) { if(strlen($keyword) > 1) { $search[] = $keyword; } } if(count($search) > 0) { array_splice($search,4); } //Hier muss noch eine Datenbankverbindung aufgebaut werden mysql_query(“ SELECT word FROM search_words WHERE word LIKE ‚%“.utf8_encode($keywords[0]).“%‘ ORDER BY word“); if(mysql_num_rows($result) > 0) { while($row = mysql_fetch_array($result)) { echo htmlentities($row[„word“]).“<br/>“; } } } } ?>
VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

addEventListener cross Browser

Diese Funktion behebt das Problem, dass der Internet Explorer den Befehl addEventListener nicht kennt und somit einen Fehler ausspuckt. Mit Hilfe dieser Funktion sollte es in allen Browsern, die Javascript unterstützen problemlos funktionieren.

function addEvent(obj,type,fn)
{
	if (obj.addEventListener)
	{
		obj.addEventListener(type,fn,false);
		return true;
	}
	else if (obj.attachEvent)
	{
		obj['e'+type+fn] = fn;
		obj[type+fn] = function() { obj['e'+type+fn]( window.event );}
		var r = obj.attachEvent('on'+type, obj[type+fn]);
		return r;

	}
	else
	{
		obj['on'+type] = fn;
		return true;
	}
}
VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)