WEB Need some help with php/mysql

Discussion in 'OT Technology' started by jizzmo, Jul 30, 2009.

  1. jizzmo

    jizzmo New Member

    Joined:
    Jul 9, 2008
    Messages:
    1,336
    Likes Received:
    0
    I have no idea what I am doing when it comes to php and mysql, so i was wondering if you guys could tell me where my screw ups are. I attempted to follow a guide here: http://marcgrabanski.com/article/jquery-google-maps-tutorial-ajax-php-mysql

    :wavey: Thanks to all that can help me out

    Here's the index.html file I have:
    Code:
    <html>
        <head>
            <title>Neighborhood Watch</title>
            <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA_PbNEwmuHbYgvA48BhjuIhQNUMpG_-0psyqWLoNPTR5_C11UERSmj-regVYAYEi57505DmCw6e6X6g"></script>
            <script type="text/javascript">
                google.load("jquery", '1.2.6');
                google.load("maps", "2.x");
            </script>
            <style type="text/css" media="screen">
                #map { float:left; width:800px; height:500px; }
                #list { float:left; width:200px; background:#eee; list-style:none; padding:0; }
                #list li { padding:10px; }
                #list li:hover { background:#555; color:#fff; cursor:pointer; cursor:hand; }
                #message { background:#555; color:#fff; position:absolute; display:none; width:100px; padding:5px; }
                #add-point { float:left; }
                div.input { padding:3px 0; }
                label { display:block; font-size:80%; }
                input, select { width:150px; }
                button { float:right; }
                div.error { color:red; font-weight:bold; }
            </style>
            <script type="text/javascript" charset="utf-8">
                $(function(){
                    var map = new GMap2(document.getElementById('map'));
                    var homerAK = new GLatLng(59.64237088173544,-151.52841567993164);
                    map.setCenter(homerAK, 12);
                    var bounds = new GLatLngBounds();
                    var geo = new GClientGeocoder(); 
                    
                    var reasons=[];
                    reasons[G_GEO_SUCCESS]            = "Success";
                    reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address";
                    reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address.";
                    reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address";
                    reasons[G_GEO_BAD_KEY]            = "Bad API Key";
                    reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries";
                    reasons[G_GEO_SERVER_ERROR]       = "Server error";
                    
                    // initial load points
                    $.getJSON("map-service.php?action=listpoints", function(json) {
                        if (json.Locations.length > 0) {
                            for (i=0; i<json.Locations.length; i++) {
                                var location = json.Locations[i];
                                addLocation(location);
                            }
                            zoomToBounds();
                        }
                    });
                    
                    $("#add-point").submit(function(){
                        geoEncode();
                        return false;
                    });
                    
                    function savePoint(geocode) {
                        var data = $("#add-point :input").serializeArray();
                        data[data.length] = { name: "lng", value: geocode[0] };
                        data[data.length] = { name: "lat", value: geocode[1] };
                        $.post($("#add-point").attr('action'), data, function(json){
                            $("#add-point .error").fadeOut();
                            if (json.status == "fail") {
                                $("#add-point .error").html(json.message).fadeIn();
                            }
                            if (json.status == "success") {
                                $("#add-point :input[name!=action]").val("");
                                var location = json.data;
                                addLocation(location);
                                zoomToBounds();
                            }
                        }, "json");
                    }
                    
                    function geoEncode() {
                        var address = $("#add-point input[name=address]").val();
                        geo.getLocations(address, function (result){
                            if (result.Status.code == G_GEO_SUCCESS) {
                                geocode = result.Placemark[0].Point.coordinates;
                                savePoint(geocode);
                            } else {
                                var reason="Code "+result.Status.code;
                                if (reasons[result.Status.code]) {
                                    reason = reasons[result.Status.code]
                                } 
                                $("#add-point .error").html(reason).fadeIn();
                                geocode = false;
                            }
                        });
                    }
                    
                    function addLocation(location) {
                        var point = new GLatLng(location.lat, location.lng);        
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        bounds.extend(marker.getPoint());
                        
                        $("<li />")
                            .html(location.name)
                            .click(function(){
                                showMessage(marker, location.name);
                            })
                            .appendTo("#list");
                        
                        GEvent.addListener(marker, "click", function(){
                            showMessage(this, location.name);
                        });
                    }
                    
                    function zoomToBounds() {
                        map.setCenter(bounds.getCenter());
                        map.setZoom(map.getBoundsZoomLevel(bounds)-1);
                    }
                    
                    $("#message").appendTo( map.getPane(G_MAP_FLOAT_SHADOW_PANE) );
                    
                    function showMessage(marker, text){
                        var markerOffset = map.fromLatLngToDivPixel(marker.getPoint());
                        $("#message").hide().fadeIn()
                            .css({ top:markerOffset.y, left:markerOffset.x })
                            .html(text);
                    }
                });
            </script>
        </head>
        <body>
            <form id="add-point" action="map-service.php" method="POST">
                <input type="hidden" name="action" value="savepoint" id="action">
                <fieldset>
                    <legend>Add an incident to the map</legend>
                    <div class="error" style="display:none;"></div>
                    <div class="input">
                        <label for="name">Incident Name</label>
                        <input type="text" name="name" id="name" value="">
                    </div>
                    <div class="input">
                        <label for="address">Address</label>
                        <input type="text" name="address" id="address" value="">
                    </div>
                    <button type="submit">Report Incident</button>
                </fieldset>
            </form>
            <div id="map"></div>
            <ul id="list"></ul>
            <div id="message"></div>
        </body>
    </html>
    here's the map-service.php file I am using:
    Code:
    <?php
        $ip = $_SERVER['REMOTE_ADDR'];
    
        // List points from database
        if ($_GET['action'] == 'listpoints') {
            $query = "SELECT * FROM locations WHERE ip='$ip'";
            $result = map_query($query);
            $points = array();
            while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
                array_push($points, array('name' => $row['name'], 'lat' => $row['lat'], 'lng' => $row['lng']));
            }
            echo json_encode(array("Locations" => $points));
            exit;
        }
        
        // Save a point from our form
        if ($_POST['action'] == 'savepoint') {
            $name = $_POST['name'];
            if(preg_match('/[^\w\s]/i', $name)) {
                fail('Invalid name provided.');
            }
            if(empty($name)) {
                fail('Please enter a name.');
            }
            
            // Query
            $query = "INSERT INTO locations SET name='$_POST[name]', lat='$_POST[lat]', lng='$_POST[lng]', ip='$ip'";
            $result = map_query($query);
            
            if ($result) {
                success(array('lat' => $_POST['lat'], 'lng' => $_POST['lng'], 'name' => $name));
            } else {
                fail('Failed to add point.');
            }
            exit;
        }
        
        function map_query($query) {
            // Connect
            mysql_connect('localhost', 'garretta_nw', 'watch')
                OR die(fail('Could not connect to database.'));
            
            mysql_select_db('garretta_locations');
            return mysql_query($query);
        }
        
        function fail($message) {
            die(json_encode(array('status' => 'fail', 'message' => $message)));
        }
        
        function success($data) {
            die(json_encode(array('status' => 'success', 'data' => $data)));
        }
    ?>
    And this is what my mysql database looks like in PhpMyAdmin:
    [​IMG]
    [​IMG]

    [​IMG]
    [​IMG]
     
  2. jizzmo

    jizzmo New Member

    Joined:
    Jul 9, 2008
    Messages:
    1,336
    Likes Received:
    0
  3. Ender0910

    Ender0910 woot!

    Joined:
    Jun 1, 2004
    Messages:
    3,039
    Likes Received:
    0
    Location:
    Redmond/Bay Area
    first of all, if this is your first forray into the realm, this is quite a few new concepts to handle at once. (ajax, jquery, sql, php, google api)

    second, what's the problem that you're trying to solve? It's a bit too much code for me to dig through to try and figure out what the site should do.
     
  4. jizzmo

    jizzmo New Member

    Joined:
    Jul 9, 2008
    Messages:
    1,336
    Likes Received:
    0
    That's the problem... i can't figure out what the problem is.

    So I created a database upload the table to it, uploaded the pages, changed the values specified in the guide to point the my mysql database. but every time I try to post a link on the map it errors out.


    If you goto: http://marcgrabanski.com/webroot/resources/jquery-ui-google-maps/tutorial-part2.html

    it should work just like that.

    My broken page is on post 2

    --------

    I was just hoping someone with more knowledge could sift through the code and point out something that is wrong I am pretty sure ti is a small error that is screwing the whole thing up, but i figured more information was better..
     
  5. pharmokan

    pharmokan OT Supporter

    Joined:
    Oct 18, 2002
    Messages:
    102,175
    Likes Received:
    442
    Location:
    L.A.
    link to tutorial?
     
  6. jizzmo

    jizzmo New Member

    Joined:
    Jul 9, 2008
    Messages:
    1,336
    Likes Received:
    0
    Post 1

    As I said earlier, i don't know anything about php/mysql so I can't really narrow it down, I was hoping someone who does could read over it (i am pretty sure the problem is with the .php file connecting to the mysql database.)
     
  7. jizzmo

    jizzmo New Member

    Joined:
    Jul 9, 2008
    Messages:
    1,336
    Likes Received:
    0
  8. pharmokan

    pharmokan OT Supporter

    Joined:
    Oct 18, 2002
    Messages:
    102,175
    Likes Received:
    442
    Location:
    L.A.
    are you doing these tutorials so you can learn php? you should definately start smaller :hsugh:
     
  9. jizzmo

    jizzmo New Member

    Joined:
    Jul 9, 2008
    Messages:
    1,336
    Likes Received:
    0
    :ugh: I am doing this tutorial because the idea I have for a website uses the same functionality. I don't see any other way of making this website.
     

Share This Page