I sort of feel satisfied for the moment regarding this project, maybe I will take a break and work on some game projects now. Hopefully nobody will fuck up my test environment while I don’t work on it, becauese you could… Maybe I should add a admin/login system before I leave it. : )
So I looked into this project again some time ago and felt that it was good stuff. So I worked a little bit more on it and it’s actually starting to look useful. One change I made was to enforce the design of the setup procedure that I envision. This is that ztinker should consist of one folder and some minor requirements regarding the page’s design to work. Now it is used that I intend to keep it that way. Instead of just rendering the constructed webpages inside of itself it now renders actual files and folder systems thanks to some PHP. I have also started to think about the interface and which tools and methods should be presented to the user. I have also made it so that tabs and newlines are retained during render (though I still have to fix it so that they are kept when stored in a database) and added a script for uploading files.
So I have been playing around a lot with how to conveniently connect to a database from the user’s webpage. I want ztinker to be a combination of graphical, tool assisted web design and open access of and monitoring of the actual web code. I also don’t necessarily need my environment to work with any style of web dev and I will propose a certain approach if that is convenient for me. Therefor it is ok for me to offer a certain way of connecting to database and certain formats of what is contained in databases as long as I’m open with what code I use to achieve that.
Something I got working well in the old solution was the possibility to let jquery dynamically change elements given that the user gave them certain classes and ids. I used this for the jquery gui editing of size an position before but now I also added a little trick for database connection. You now give an element a certain calss, “contain”, which makes that element into a container for database content. You then give it an id which will be used as a reference to fill it with database content. Everything falls into place as you use a specific database structure in which you give your database content the id from your markup so that it knows where it should be inserted. Works pretty well. : )
So I have been working on a way to integrate a database into your ztinker webpage. I initially intended try and add the possibility to connect a phpmyadmin installation to the interface for a fast, robust and common db management solution. However it turns out that phpmyadmin comes with protection against iframe connections. If you have access to the configuration file for your installation you can get around this but this is seldom the case when you hire space from some service provide and I don’t want people to have to set up their own phpmyadmins so I started looking into alternatives. I found this lightweight thing called phpmyedit which is open source and generates a db management page for you. I will probably use a specific generation such as this and then allow the user to insert their own login credentials instead.
Making progress though…
Firstly, I’m in Visby for a conference regarding museum exhibitions in Sweden with a project in availability and norm criticism, meaning I have been working from a hotel room during the spare hours. This is bad because I don’t have my good desktop rig, but then again it is often good for my concentration and thereby inspiration. SO, my previous success with finding out just how easy it is to create a webpage which works as a site editor with an iframe came to a abrupt stop. I realized that appending JS lib references to iframes via the src mime-method did not cause the libraries to actually load. I tried a lot of stuff, including alternate ways of injecting JS libraries into iframes, either with no success or making the page load extremely slow, and deserting iframes all together. Working with something else than an iframe however proved disadvantageous since other ways don’t simulate an actual separate web pages as well. Eventually I came up with a working solution. I let the iframe load a normal HTML file which includes necessary libraries and then use an invisible iframe in between in order to be able to use the magic of encodeURIComponent. I can then extract the body and other parts from the invisible iframe and replace the contents of my prepared, iframed site. This way the JS lib refs are kept intact and I still have dynamic HTML. For the styling I use a style tag with a certain id which I update the contents of in the prepared webpage.I have also added separate editors for markup (HTML) and styling (CSS). The next step will be to make it so that resizing divs in the output window actually changes the styling on the editor side. Then I will work on a simple way to connect dynamic database content and after that syntax highlighting and neat editor controls.
So I had been stuck for a while with this very simple page, putting some JS for loading content from another file together with scaling and resizing of divs. This has worked as a idea sprout for myself but was never very representative for what I wanted. I stumbled upon this example on Stack Overflow today where two rows of code basically fixed the basics for my page. Using the method encodeURIComponent on the contents of a text field and appending it to an iframes src with a html mime-type made for a really cool HTML, CSS and JS editor. Looking good!